/*-------------------------
         GENERAL
-------------------------*/
        
        body {
            font-family: "Muli", sans-serif;
            font-weight: 300;
            background: #2c2d30 !important;
        }
        
        .full-screen {
            height: 100vh;
        }
        
        main#main {b
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
        }
        
        #main>section {
            position: fixed;
            top: 0;
            left: 0;
            width: calc(100%);
            bottom: 0;
            overflow-x: hidden;
            overflow-y: auto;
            transform: translate3d(100%, 0, 0);
            z-index: 0;
            opacity: 0;
            background-color: #f1f3f6;
            transition: transform .6s ease .6s, opacity 0s ease .6s;
         }
        
        #main>section.active {
            transform: translate3d(0, 0, 0);
            z-index: 2;
            opacity: 1;
            transition: transform .6s ease;
        }
        
        .blog-single-page #main>section.active {
            transform: none;
        }
        
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .h1 {
            font-family: "Poppins", sans-serif;
            line-height: 1.618;
        }
        
        h2,
        h2 span {
            font-weight: 700;
        }
        
        .max-width-450 {
            max-width: 450px;
            margin: 0 auto;
        }
        
        a:hover {
            text-decoration: none;
        }
        
        a,
        button {
            outline: none !important;
        }
        
        .box-border {
            background-color: #f1f3f6;
            border-radius: 1.25rem;
            box-shadow: 3px 3px 3px #dadada, -3px -3px 3px #fafafa;
        }
        
        .box-hover-border {
            background-color: #f1f3f6;
            border-radius: 1.25rem;
            box-shadow: 3px 3px 3px #dadada, -3px -3px 3px #fafafa;
        }
        
        .box-hover-border:hover {
            box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
        }
        
        .button-border {
            background-color: #f1f3f6;
            border-radius: 1rem;
            box-shadow: 3px 3px 3px #dadada, -3px -3px 3px #fafafa;
            display: inline-block;
            padding: 1px;
        }
        
        .pill-button:hover {
            background-color: #0061f1 !important;
        }
        
        .button-border button {
            background-color: transparent;
        }
        
        .pill-button {
            border-radius: 1rem;
            border: none;
            padding: 10px 30px;
            transition: all 0.3s ease;
            font-size: 16px;
            display: inline-block;
            font-weight: 800;
        }
        
        .pill-button:hover,
        .pill-button.active {
            border: none;
            box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
        }
        
        .image-border {
            background-color: #f1f3f6;
            border-radius: 1.25rem;
            box-shadow: 3px 3px 8px rgba(55, 84, 170, 0.1), -3px -3px 8px white;
            padding: 5px;
        }
        
        .image-border img {
            width: 100%;
            border-radius: 1rem;
        }
        
        .title h2 {
            font-size: 3rem;
        }
        
        .title p {
            font-size: 18px;
        }
        
        .display-table {
            width: 100%;
            height: 100%;
            display: table;
        }
        
        .display-content {
            vertical-align: middle;
            display: table-cell;
            /* padding: 5rem 0; */
            text-align: center;
        }
        
        .center-item {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
        /*-------------------------
          ColorPallet
  -------------------------*/
        
        .color-switcher .color-pallet {
            background-color: white;
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
            top: 25px;
            z-index: 1000;
            position: fixed;
            transition: all 0.3s ease;
            right: 75px;
            width: 189px;
            border-radius: 1.25rem;
            opacity: 0;
            visibility: hidden;
        }
        
        .color-switcher .color-pallet.show {
            opacity: 1;
            visibility: visible;
        }
        
        .color-switcher .pallet-button {
            background-color: white;
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
            top: 25px;
            z-index: 1000;
            position: fixed;
            transition: all 0.3s ease;
            display: block;
            height: 40px;
            right: 25px;
            width: 40px;
            border-radius: 0.75rem;
        }
        
        .color-switcher .pallet-button a {
            width: 40px;
            height: 40px;
            display: block;
            text-align: center;
        }
        
        .color-switcher .pallet-button i {
            color: #3c3c3c;
            font-size: 20px;
            line-height: 40px;
        }
        
        .color-switcher ul.pattern {
            list-style: none outside none;
            margin: 0 0 0;
            overflow: hidden;
            padding: 0;
        }
        
        .color-switcher ul.pattern li {
            float: left;
        }
        
        .color-switcher ul.pattern li a {
            cursor: pointer;
            display: block;
            height: 30px;
            width: 30px;
            border-radius: 28px 18px 0 21px;
            transform: rotate(-135deg);
            margin: 15px 0 15px 25px;
        }
        
        .color-switcher ul.pattern .color1 {
            background: #1ab394;
        }
        
        .color-switcher ul.pattern .color2 {
            background: #fbdd62;
        }
        
        .color-switcher ul.pattern .color3 {
            background: #ddae3f;
        }
        
        .color-switcher ul.pattern .color4 {
            background: #0cc0de;
        }
        
        .color-switcher ul.pattern .color5 {
            background: #1b63ad;
        }
        
        .color-switcher ul.pattern .color6 {
            background: #d78fd6;
        }
        
        .color-switcher ul.pattern .color7 {
            background: #ff645e;
        }
        
        .color-switcher ul.pattern .color8 {
            background: #ff4274;
        }
        
        .color-switcher ul.pattern .color9 {
            background: #d31d4d;
        }
        /*-------------------------
          PRELOADER
  -------------------------*/
        
        #overlayer {
            position: fixed;
            z-index: 9999;
            background: white;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        
        .loader {
            position: fixed;
            top: calc(50% - 20px);
            left: calc(50% - 20px);
            z-index: 99999;
            border: 4px solid #d2d2d2;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 2s linear infinite;
        }
        
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        /*-------------------------
         OVERLAY MENU
  -------------------------*/
        
        .menu-toggler {
            display: none;
        }
        
        .menu {
            position: absolute;
right: 39%;
width: 200px;
            position: absolute;
            top: 50%;
            transform: translateY(-41%);
         }
        
        .menu .list-group-item {
            background-color: transparent;
            border: none;
            padding: 0 2.5rem;
        }
        
        .menu li a {
            width: 60px;
            height: 60px;
            display: block;
            border-radius: 1rem;
            transition: all 0.3s ease;
            box-shadow: 3px 3px 3px #cdcdcd, -3px -3px 3px #fafafa;
        }
        
        .menu li a:hover,
        .menu li a.active {
            box-shadow: inset 3px 3px 3px #cdcdcd, inset -3px -3px 3px #fafafa;
        }
        
        .menu li a i {
            display: block;
            font-size: 1.25rem;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            transition: all 0.3s ease;
        }
        
        .menu li a:hover i,
        .menu li a.active i {
            transform: translateY(-100%);
        }
        
        .menu span {
            font-size: 12px;
            font-weight: 500;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .menu a:hover span,
        .menu a.active span {
            opacity: 1;
            visibility: visible;
            transform: translateY(50%);
        }
        
        header {
            width: -webkit-fill-available;
            position: fixed;
            z-index: 1030;
        }
        
        header .navbar-brand {
            display: compact;
            margin-left: 30;
            text-align: left;
            }
            
        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;
            color: white;
        }
        /*-------------------------
         COLOR SCHEME
  -------------------------*/
        
        .color-scheme li {
            width: 40%;
            margin: 0 !important;
        }
        
        .color-scheme li a {
            display: block;
            padding: 8px 0;
            background-color: #f1f1f1;
            border-radius: 0.75rem;
            color: #222;
            transition: all 0.5s ease;
            font-size: 14px;
        }
        
        .color-scheme li a.light-scheme:hover,
        .color-scheme li a.light-scheme.active {
            background-color: #0fcae8;
            color: #fff;
        }
        
        .color-scheme li a.dark-scheme:hover,
        .color-scheme li a.dark-scheme.active {
            background-color: #2c2d30;
            color: #fff;
        }
        
        .theme-skin-title {
            background-color: #f1f3f6;
            margin: 0;
            padding: 15px 0 0;
            border-radius: 16px 16px 0 0;
        }
        
        .theme-skin {
            background-color: #f1f3f6;
            margin: 0;
            padding: 8px 0 16px;
        }
        
        .theme-skin li {
            width: 40%;
            margin: 0 !important;
        }
        
        .theme-skin li:last-child {
            background-color: #f1f3f6;
            border-radius: 0.75rem;
            box-shadow: 3px 3px 3px #dadada, -3px -3px 3px #fafafa;
            padding: 1px;
        }
        
        .theme-skin li:last-child a:hover,
        .theme-skin li:last-child a.active {
            border: none;
            box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
        }
        
        .theme-skin li a {
            display: block;
            padding: 8px 0;
            border-radius: 0.75rem;
            color: #222;
            transition: all 0.5s ease;
            font-size: 14px;
        }
        
        .theme-skin li a.flat-skin {
            background-color: #fff;
            margin-right: 3px;
        }
        
        .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;
        }
        /*-------------------------
             Hero
  -------------------------*/
        
        .hero-01 {
            background: url("w.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .hero-01 .hero-content {
            color: #3c3c3c;
        }
        
        .hero-02 {
            background: url("w.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
        
        .hero-03 {
/*            background: url("../../arrierepng.png");
*/            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
        
        .hero-03:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
         }
        
        .hero-03 .hero-content {
            color: #fafafa;
            padding-left:88px;
        }
        
        .hero-05 .video-overlay {
            background-repeat: no-repeat;
            background-size: cover;
            left: auto;
            overflow: hidden;
        }
        
        .hero-05::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.5);
            z-index: 1;
        }
        
        .hero-item {
            position: relative;
            z-index: 5;
        }
        
        .hero-social .list-inline-item:not(:last-child) {
            margin-right: 1.5rem;
        }
        
        .hero-social li a {
            font-size: 1.25rem;
            color: #3c3c3c;
        }
        
        .hero-03 .hero-social li a {
            color: #fafafa;
        }
        
        .hero-image {
            position: fixed;
            bottom: 0;
            max-width: 580px;
        }
        
        .hero-image img {
            width: 100%;
        }
        
        canvas.particles-js-canvas-el {
            position: absolute;
            top: 0;
            z-index: -1;
        }
        
        .particles-js-canvas-el {
            position: absolute;
            top: 0;
        }
        /*-------------------------
            HERO-06
  -------------------------*/
        
        .hero-06 li img {
            width: 15px;
        }
        
        .hero-06 .image-border img {
            width: 80%;
            padding: 4px;
            background-color: transparent;
            border: 1px solid #f0f0f0;
            max-width: 100%;
            height: auto;
        }
        
        .hero-06 .hero-images img {
            z-index: 0;
            position: relative;
box-shadow: 0px 0px 9px #ddae3f, 0px 0px 0px #ddae3f;
}
        
        .hero-06 .hero-images .square img {
            box-shadow: none;
        }
        
        .hero-06 .circle {
            border-radius: 50%;
            opacity: 0.9;
            position: absolute;
            overflow: hidden;
            width: 85px;
            height: 85px;
            background: #fbdd62;
            top: 250px;
            right: none;
            animation: circling 6s linear infinite;
            z-index: 0;
        }
        
        @keyframes circling {
            0% {
                transform: rotate(0deg) translate(-80px) rotate(0deg);
            }
            100% {
                transform: rotate(360deg) translate(-80px) rotate(-360deg);
            }
        }
        
        .hero-06 .circle-2 {
            border-radius: 50%;
            opacity: 0.9;
            position: absolute;
            overflow: hidden;
            width: 55px;
            height: 55px;
            background: #ff645e;
            top: 250px;
            bottom: 250px;
            left: 80px;
            right: 1000;
            margin: auto;
            animation: circlereverse 22s linear infinite;
            z-index: 11;
        }
        
        @keyframes circlereverse {
            0% {
                transform: rotate(0deg) translate(-275px) rotate(0deg);
            }
            100% {
                transform: rotate(-360deg) translate(-275px) rotate(360deg);
            }
        }
        
        .hero-06 .floating {
            border-radius: 50%;
            opacity: 0.9;
            position: absolute;
            overflow: hidden;
            width: 50px;
            height: 50px;
            background: #1ab394;
            z-index: 0;
            animation: floating 6s linear infinite;
        }
        
        @keyframes floating {
            0% {
                transform: translate(0px);
            }
            50% {
                transform: translate(-50px);
            }
            100% {
                transform: translate(0px);
            }
        }
        
        .hero-06 .square {
            position: absolute;
            bottom: 25px;
            z-index: 0;
            left: -10px;
            animation: rotate 25s linear infinite;
        }
        
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        /*-------------------------
            About
  -------------------------*/
        
        .about .personal-info ul li {
            margin-bottom: 1.25rem;
        }
        
        .about .personal-info ul li p {
            font-weight: 800;
            font-size: 18px;
        }
        
        .about .personal-info span {
            font-weight: 300;
            color: #5f5f5f;
        }
        /*-------------------------
           Count up
  -------------------------*/
        
        .count-up {
            margin: 4rem 0;
            padding: 32px 16px;
        }
        
        .count-number {
            font-size: 1.5rem;
            font-weight: 500;
        }
        
        .count-content {
            margin: 10px 0;
        }
        
        .count-icon i {
            font-size: 2.5rem;
        }
        /*-------------------------
           Services
  -------------------------*/
        
        .services .services-item {
              padding: 10px 11px 1px;
    margin-top: 13px;
        }
        
        .services .services-item.data-background {
            margin-top: 0;
        }
        
        .services .image-border {
            margin-top: 30px;
        }
        
        .services .image-border .box-hover-border {
            border-radius: 1rem;
        }
        
        .flat-demo .services .image-border .box-hover-border {
            border-radius: 1.25rem;
        }
        
        .services .services-item:hover .services-icon {
            transform: rotateY(360deg);
            transition: 0.9s ease;
        }
        
        .services .services-content {
            padding-left: 3rem;
        }
        /*-------------------------
          Testimonial
  -------------------------*/
        
        .testimonial .owl-carousel {
            margin-top: 30px;
        }
        
        .testimonial .owl-carousel .testimonial-item {
            padding: 0 30px 30px;
        }
        
        .testimonial .owl-carousel .testimonial-item img {
            width: 85px;
            display: inline-block;
            border-radius: 50%;
        }
        
        .testimonial .owl-carousel .testimonial-item:hover .testimonial-border {
            width: 90px;
        }
        
        .testimonial .owl-carousel .owl-stage-outer {
            padding: 1rem 0;
        }
        
        .testimonial .owl-carousel .testimonial-image {
            position: relative;
            display: inline-block;
            border-radius: 50%;
            padding: 10px;
            margin-top: -60px;
            background-color: #f1f3f6;
            width: 115px;
            height: 115px;
        }
        
        .testimonial .owl-carousel .testimonial-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 2px;
            width: 92%;
            height: 40%;
            background-color: #f1f3f6;
            z-index: 1;
            right: 6px;
        }
        
        .testimonial .owl-carousel .testimonial-image::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
            border-radius: 50%;
            z-index: 0;
            left: 2px;
        }
        
        .testimonial .owl-carousel .testimonial-image .img-thumbnail {
            background-color: transparent;
        }
        
        .testimonial .owl-carousel .testimonial-image-border {
            box-shadow: 3px 3px 3px #dadada, -3px -3px 3px #fafafa;
            border-radius: 50%;
            padding: 5px;
            position: relative;
            z-index: 2;
        }
        
        .testimonial .owl-carousel .owl-item {
            padding-top: 2rem;
        }
        
        .testimonial .owl-carousel .owl-dots {
            text-align: center;
            margin-top: 1rem;
        }
        
        .testimonial .owl-carousel .owl-dot span {
            display: block;
            width: 24px;
            height: 5px;
            background-color: #e1e1e1;
            margin: 0 0.25rem;
            border-radius: 1rem;
            transition: all 0.3s ease;
        }
        
        .testimonial .owl-carousel .owl-dot.active span {
            width: 32px;
            box-shadow: 3px 3px 8px rgba(55, 84, 170, 0.1), -3px -3px 8px white;
        }
        /*-------------------------
           RESUME
  -------------------------*/
        
        .resume h3 i {
            padding-right: 0.75rem;
        }
        
        .resume .timeline-items {
            padding: 30px;
            margin-top: 30px;
        }
        
        .resume .timeline-item {
            position: relative;
            margin-bottom: 30px;
        }
        
        .resume .timeline-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            content: "";
            width: 1px;
            border-radius: 1rem;
            display: block;
        }
        
        .resume .timeline-contents {
            padding-left: 30px;
        }
        
        .resume .timeline-icon {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            position: absolute;
            top: 15px;
            left: -7px;
            z-index: 10;
        }
        
        .resume .timeline-year {
            font-size: 14px;
            font-weight: 500;
        }
        /*-------------------------
          Work SKILL
  -------------------------*/
        
        .skill-box {
            padding: 60px 30px 30px;
            margin-top: 30px;
        }
        
        .skill-box .skillbar {
            position: relative;
            display: block;
            width: 100%;
            height: 10px;
            border-radius: 5px;
            transition: 0.1s linear;
            background-color: #f1f3f6;
            box-shadow: inset 3px 3px 8px rgba(55, 84, 170, 0.3), inset -3px -3px 8px white;
        }
        
        .skill-box .skillbar:not(:last-child) {
            margin-bottom: 43px;
        }
        
        .skill-box .skillbar-title {
            position: absolute;
            top: -28px;
            left: -17px;
            font-weight: 600;
            font-size: 14px;
        }
        
        .skill-box .skillbar-title span {
            margin-left: 18px;
        }
        
        .skill-box .fill-skillbar {
            height: 10px;
            width: 0;
            border-radius: 5px;
            float: left;
        }
        
        .skill-box .skill-bar-percent {
            position: absolute;
            font-weight: 500;
            bottom: 16px;
            right: 0;
        }
        /*-------------------------
        Language Skill
  -------------------------*/
        
        .language-bar {
            padding: 35px 30px;
            margin-top: 30px;
        }
        
        .language-skill:not(:last-child) {
            margin-bottom: 15px;
        }
        
        .language-skill h4 {
            font-size: 16px;
        }
        
        .language-skill h4 span {
            color: #5f5f5f;
            font-size: 14px;
            font-weight: normal;
        }
        /*-------------------------
           PORTFOLIO
  -------------------------*/
        
        .portfolio .portfolio-filter .list-inline-item:not(:last-child) {
            margin-bottom: 1rem;
        }
        
        .portfolio .portfolio-filter li a {
            padding: 5px 15px;
        }
        
        .portfolio .portfolio-item {
            margin-top: 30px;
        }
        /* .portfolio .portfolio-item:hover {
    margin-top: -200px;
} */
        
        .portfolio .portfolio-item-content {
            position: initial;
            border-radius: 1.25rem;
        }
        
        .portfolio .portfolio-item-content::before {
            content: "";
            position: absolute;
            top: 15px;
            right: 15px;
            bottom: 15px;
            left: 15px;
            opacity: 0;
            transform: scale(0.8);
            transition: .5s all ease;
            border-radius: 1.25rem;
        }
        
        .portfolio .portfolio-item-content:hover .img-overlay-content {
            opacity: 1;
        }
        
        .portfolio .portfolio-item-content:hover::before {
            transform: scale(1);
            opacity: 1;
        }
        
        .portfolio .img-overlay-content {
            position: absolute;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            opacity: 0;
            transition: all .5s ease;
        }
        
        .portfolio .img-overlay-content h5 {
            color: #fafafa;
        }
        
        .portfolio .portfolio-icon a {
            background-color: white;
            width: 35px;
            height: 35px;
            line-height: 37px;
            margin: 0 8px;
            display: inline-block;
            border-radius: 4px;
            transition: all 0.3s ease;
            line-height: 37px;
        }
        
        .portfolio .portfolio-icon a i {
            font-size: 18px;
            font-weight: 700;
        }
        
        .portfolio .portfolio-icon a:first-child {
            background-color: white;
            width: 35px;
            height: 35px;
            line-height: 37px;
            margin: 0 8px;
            display: inline-block;
            border-radius: 4px;
            transition: all 0.3s ease;
            border-color: transparent;
        }
        
        .portfolio .portfolio-icon a:first-child i {
            font-size: 18px;
            font-weight: 700;
            position: relative;
            left: -2px;
        }
        
        .portfolio .portfolio-icon a:first-child:focus {
            outline: none !important;
        }
        
        .visible_item {
            display: none;
        }
        
        .portfolio-page .visible_item {
            display: block;
        }
        /*-------------------------
            BLOG
  -------------------------*/
        
        .blog .blog-item {
            padding: 30px;
            margin: 60px 0 30px;
        }
        
        .blog .blog-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 45px;
            width: auto;
            height: 57px;
            background-color: #f1f3f6;
            z-index: 1;
            right: 45px;
        }
        
        .blog .blog-content .list-inline-item:not(:last-child) {
            margin-right: 3rem;
        }
        
        .blog .blog-image {
            position: relative;
            display: inline-block;
            border-radius: 1.25rem;
            padding: 10px;
            margin-top: -88px;
            background-color: #f1f3f6;
        }
        
        .blog .blog-image::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
            border-radius: 1.25rem;
            z-index: 0;
        }
        
        .blog .blog-intro {
            box-shadow: 3px 3px 3px #dadada, -3px -3px 3px #fafafa;
            border-radius: 1.25rem;
            padding: 5px;
            position: relative;
            z-index: 2;
            display: block;
        }
        
        .blog .blog-intro img {
            display: inline-block;
            border-radius: 1rem;
            width: 100%;
        }
        /*-------------------------
            CONTACT
  -------------------------*/
        
         ::-moz-placeholder,
        .form-control::-moz-placeholder {
            color: #5f5f5f;
        }
        
        .contact .form-item .form-control {
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            height: 55px;
            font-size: 14px;
            position: relative;
            transition: border .9s ease;
            padding: 1rem;
            border: none;
        }
        
        .contact .form-item .form-group {
            background-color: #f1f3f6;
            box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
            -webkit-box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
            -moz-box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
            -o-box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
            -ms-box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
            border-radius: 1.25rem;
        }
        
        .contact-form textarea {
            min-height: 175px;
            resize: none;
        }
        
        .contact #message.toast {
            max-width: 500px;
            padding: 2px 0 1px;
            position: absolute;
            top: -2px;
            display: inline-block;
            left: 200px;
            border-radius: 1rem;
            color: #fafafa;
        }
        
        .contact .toast button span {
            position: relative;
            top: 8px;
        }
        
        .contact .contact-info ul li {
            margin-top: 1.5rem;
        }
        
        .contact .contact-info i {
            margin-right: 0.5rem;
        }
        
        .contact .contact-info img {
            width: 50px;
        }
        
        .contact .copy-right {
            position: relative;
            top: 5rem;
        }
        /*-------------------------
         BLOG SIDEBAR
  -------------------------*/
        
        .post-sidebar {
            position: fixed;
            display: block;
            width: 310px;
            right: -320px;
            padding: 0;
            top: 0;
            height: 100%;
            float: none;
            z-index: 1041;
            border-radius: 16px 0 0 16px;
            opacity: 1;
            visibility: visible;
            -webkit-transition: all .66s ease-in-out;
            -moz-transition: all .66s ease-in-out;
            -o-transition: all .66s ease-in-out;
            -ms-transition: all .66s ease-in-out;
            transition: all .66s ease-in-out;
        }
        
        .post-sidebar.open {
            right: 0;
        }
        
        .post-sidebar-content {
            overflow-y: scroll;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 10px 0;
            box-shadow: 3px 3px 3px #cdcdcd, -3px -3px 3px #fafafa;
            background-color: #f1f3f6;
            z-index: 1;
        }
        
        .post-sidebar-toggle {
            position: relative;
            display: block;
            width: 40px;
            height: 40px;
            line-height: 46px;
            text-align: center;
            background-color: #f1f3f6;
            right: 75px;
            font-size: 19px;
            top: 81px;
            border-radius: 0.75rem;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .5s ease-in-out;
            -moz-transition: .5s ease-in-out;
            -o-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
            cursor: pointer;
            z-index: 1000;
            box-shadow: 3px 3px 3px #cdcdcd, -3px -3px 3px #fafafa;
        }
        
        .post-sidebar-toggle span {
            display: block;
            position: absolute;
            height: 3px;
            width: 44%;
            background: #000;
            border-radius: 5px;
            opacity: 1;
            left: 13px;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .25s ease-in-out;
            -moz-transition: .25s ease-in-out;
            -o-transition: .25s ease-in-out;
            transition: .25s ease-in-out;
        }
        
        .post-sidebar-toggle span:nth-child(1) {
            top: 12px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }
        
        .post-sidebar-toggle span:nth-child(2) {
            top: 19px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }
        
        .post-sidebar-toggle span:nth-child(3) {
            top: 26px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }
        
        .post-sidebar-toggle span:before {
            content: '';
            width: 3px;
            height: 3px;
            background-color: #000;
            position: absolute;
            left: -4px;
            border-radius: 5px;
        }
        
        .post-sidebar-toggle.open span {
            left: 14px;
        }
        
        .post-sidebar-toggle.open span:nth-child(1) {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            top: 14px;
        }
        
        .post-sidebar-toggle.open span:before {
            left: -2px;
        }
        
        .post-sidebar-toggle.open span:nth-child(2) {
            width: 0%;
            opacity: 0;
        }
        
        .post-sidebar-toggle.open span:before {
            left: -2px;
        }
        
        .post-sidebar-toggle.open span:nth-child(3) {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 25px;
        }
        
        .post-sidebar-toggle.open span:before {
            left: -2px;
        }
        
        .aside-contents {
            margin: 0 15px 15px;
            box-shadow: 3px 3px 3px #cdcdcd, -3px -3px 3px #fafafa;
            background-color: #f1f3f6;
            border-radius: 16px;
            padding: 15px;
        }
        
        .search {
            padding: 15px;
        }
        
        .search .form-group {
            background-color: #f1f3f6;
            box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
            border-radius: 1.5rem;
            margin: 0;
        }
        
        .search .form-group input {
            border: none !important;
            background-color: transparent;
            padding: 13px 16px 11px;
            font-size: 14px;
            outline: none !important;
            width: 88%;
        }
        
        .search .form-group button {
            position: absolute;
            right: 6px;
            top: 3px;
        }
        
        .aside-title {
            position: relative;
            overflow: hidden;
            margin-bottom: 15px;
        }
        
        .aside-title span {
            display: inline-block;
            vertical-align: middle;
            margin-right: 15px;
            font-weight: 600;
        }
        
        .aside-title:after {
            content: "";
            display: inline-block;
            width: 100%;
            height: 1px;
            top: 62%;
            position: absolute;
            background-color: #ddd;
        }
        
        .aside-item ul li {
            position: relative;
        }
        
        .aside-item ul li a {
            font-size: 14px;
            color: #444;
            padding: 4px 0px;
            display: inline-block;
            padding-left: 12px;
            transition: all 0.3s ease;
        }
        
        .aside-item ul li a:hover {
            padding-left: 17px;
        }
        
        .aside-item ul li:last-child a {
            padding-bottom: 0;
        }
        
        .aside-item ul li i {
            font-size: 8px;
            position: absolute;
            top: 10px;
            width: 12px;
            display: inline-block;
        }
        /* flat */
        
        .flat-demo .post-sidebar-toggle,
        .flat-demo .search .form-group,
        .flat-demo .aside-contents {
            background-color: #fefefe;
            box-shadow: 0 0 3px 0px rgba(145, 145, 145, 0.3) !important;
        }
        
        .flat-demo .post-sidebar-content {
            background-color: #f8f8f8 !important;
            box-shadow: 0 0 8px 0px rgba(145, 145, 145, 0.3) !important;
        }
        
        .flat-demo .comments-devider {
            height: 1px;
        }
        /* media */
        
        @media (max-width: 1199px) {
            .post-sidebar-toggle {
                transform: none;
                transition: none;
                right: 65px
            }
            .post-sidebar-toggle.open {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
                background-color: rgba(0, 0, 0, 0.5) !important;
                border-radius: 0;
            }
            .post-sidebar-toggle.open span {
                display: none;
            }
            .blog-single .post-sidebar-toggle {
                right: 65px;
            }
            .color-switcher .pallet-button {
                right: 15px;
            }
        }
        /*-------------------------
          SINGLE BLOG
  -------------------------*/
        
        .modal-dialog {
            max-width: 75%;
        }
        
        .blog-single .modal-content {
            background-color: #f1f3f6;
        }
        
        .breadcrumb {
            border-radius: 1rem;
            padding: 15px 15px;
        }
        
        .breadcrumb li a {
            color: #222;
            font-weight: 600;
        }
        
        .blog-single .close {
            color: #5f5f5f;
            text-shadow: none;
        }
        
        .blog-single img {
            width: 100%;
            border-radius: 1rem;
        }
        
        .comments img {
            width: 80px;
            border-radius: 50%;
        }
        
        .comments .comment-info {
            margin-left: 100px;
        }
        
        .blog-single .entry-meta li:not(:last-child) {
            margin-right: .75rem;
        }
        
        .blog-single .entry-meta li a {
            font-size: 14px;
            transition: all 0.3s ease;
            position: relative;
            top: 0;
        }
        
        .blog-single .entry-meta li a i {
            color: #666;
            font-size: 13px;
            padding-right: 5px;
        }
        
        .blog-single .entry-meta li a:hover {
            top: -3px;
            padding-bottom: 3px;
        }
        
        .comment-author {
            margin-left: 80px;
            position: relative;
            padding-top: 7px;
        }
        
        .comment-author span {
            font-weight: 600;
        }
        
        .comment-date {
            font-size: 13px;
            padding-top: 10px;
            font-weight: 400;
        }
        
        .comment-reply-link {
            position: absolute;
            top: 7px;
            right: 0;
            color: #444;
            font-size: 14px;
        }
        
        .comment-text {
            clear: both;
            padding-top: 5px;
            font-size: 15px;
            margin-left: 80px;
        }
        
        .comments-devider {
            background-color: #f1f3f6;
            box-shadow: inset 2px 2px 4px rgba(55, 84, 170, 0.3), inset -2px -2px 0px white;
            height: 10px;
            width: 90%;
            margin: 10px auto;
            border-radius: 15px;
        }
        
        .comments .commnet-image-border img {
            width: 65px;
            border-radius: 50%;
            height: 65px;
        }
        
        .reply-comment {
            margin-left: 3rem;
        }
        
        @media (min-width: 992px) {
            section{
                margin-top: 5% !important;
            }
            .blog-single .post-sidebar {
                position: unset;
                width: 25%;
                max-width: 25%;
                -ms-flex: 0 0 25%;
                flex: 0 0 25%;
                z-index: 0;
                padding: 0 15px;
            }
            .blog-single .post-sidebar-content {
                position: unset;
                box-shadow: none;
                background-color: transparent;
                overflow: visible;
                padding-top: 0;
            }
            .blog-single .post-sidebar-toggle {
                display: none;
            }
            .blog-single .search {
                padding: 0 0 15px;
            }
            .blog-single .aside-contents {
                margin: 0 0 15px;
            }
            .flat-demo .blog-single .post-sidebar-content {
                background-color: transparent !important;
                box-shadow: none !important;
            }
            .flat-demo .search .form-group,
            .flat-demo .aside-contents {
                background-color: #fefefe;
                box-shadow: 3px 3px 8px 0px rgba(145, 145, 145, 0.1) !important;
            }
        }
        
        @media (max-width: 575px) {
            .reply-comment {
                margin-left: 1rem;
            }
        }
        /*-------------------------
        SINGLE Portfolio
  -------------------------*/
        
        .portfolio-single .modal-content {
            background-color: #f1f3f6;
        }
        
        .portfolio-single .close {
            color: #5f5f5f;
            text-shadow: none;
        }
        
        .portfolio-single img {
            border-radius: 1rem;
            width: 100%;
        }
        /*-------------------------
        Next & Prev Page
  -------------------------*/
        
        .next-prev-page {
            position: fixed;
            right: 25px;
            bottom: 25px;
            z-index: 1031;
        }
        
        .next-prev-page button {
            display: block;
            width: 40px;
            height: 40px;
            border: none;
            background-color: transparent;
            border-radius: 0.75rem;
        }
        /*-------------------------
             MEDIA
  -------------------------*/
        
        @media (max-width: 1199px) {
            
            .color-switcher .color-pallet {
                right: 65px;
            }
            .scroll-button {
                display: block;
            }
            .hero-01 {
                background-position: center;
            }
            .menu {
                position: absolute;
                width: 200px;
                position: absolute;
                top: 50%;
                right: -5rem !important;
                transform: translateY(-41%);
                }
            .menu-toggler.open {
                left: 95px;
            }
            .next-prev-page {
                right: 15px;
            }
            .menu-toggler {
                display: block;
                position: fixed;
                top: 25px;
                left: 15px;
                transition: all 0.3s ease;
                cursor: pointer;
            }
            .menu-toggler span {
                display: block;
                width: 40px;
                margin: auto;
                text-align: center;
                border-radius: 10px;
                line-height: 44px;
                font-size: 22px;
            }
            header {
                    left: -97px;
             height: 100%;
            transition: all 0.3s ease;
            width: auto;
        }
        .menu .list-group-item { 
            padding: 1rem 2.5rem;
            }
            header.open {
                left: 0;
            }
            #main>section {
                padding-left: 0;
            }
            .blog-image::before {
                height: 24%;
            }
            .modal-dialog {
                max-width: 100%;
            }
            .list-group {
                display: block;
                padding-left: 0;
                margin-bottom: 0;
                }
        }
        
        @media (max-width: 991px) {
            .hero-image {
                display: none;
            }
            .hero-06 {
                text-align: center;
            }
            .next-prev-page {
                right: 0;
                border-radius: 1rem 0 0 1rem;
            }
            .next-prev-page button {
                border-radius: 1rem 0 0 1rem;
            }
            #main>section.active.section-z-index {
                z-index: 1040;
                transform: none;
            }
        }
        
        @media (min-width: 726px) and (max-width: 767px) {
            #socialwalid {
                left: 100 !important;
            }
            .rounded-circle {
                left: 140px !important;
            }
        }
        
        @media (max-width: 575px) {
            .display-table,
            .display-content {
                display: block;
            }
            .hero-01 .display-table,
            .hero-02 .display-table,
            .hero-03 .display-table,
            .hero-04 .display-table,
            .hero-05 .display-table {
                display: table;
            }
            .hero-01 .display-content,
            .hero-02 .display-content,
            .hero-03 .display-content,
            .hero-04 .display-content,
            .hero-05 .display-content {
                display: table-cell;
            }
            .about .personal-info span {
                display: block;
            }
            .language-bar .list-inline-item:not(:last-child) {
                margin-right: .25rem;
            }
            #message.toast {
                top: 18px;
                left: inherit;
                font-size: 12px;
                padding: 3px 0;
            }
        }
        
        @media (max-width: 380px) {
            #message.toast {
                top: 60px;
                left: 15px;
            }
        }
        /*-------------------------
        arshia DARK
  -------------------------*/
        
        .arshia-dark .hero-01 {
            background: url("../img/hero-001.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .arshia-dark .hero-02:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.8);
        }
        
        .arshia-dark .post-sidebar-toggle,
        .arshia-dark .post-sidebar-content,
        .arshia-dark .aside-contents {
            background-color: #2c2d30;
            box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .post-sidebar-toggle span,
        .arshia-dark .post-sidebar-toggle span:before {
            background: #fafafa;
        }
        
        .arshia-dark .search .form-group button,
        .arshia-dark .aside-item ul li a,
        .arshia-dark .search .form-group input::placeholder,
        .arshia-dark .breadcrumb li a,
        .arshia-dark .blog-single .entry-meta li a i,
        .arshia-dark .comment-reply-link,
        .arshia-dark ::placeholder {
            color: #fafafa;
        }
        
        .arshia-dark .search .form-group {
            background-color: #2c2d30;
            box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .comments-devider {
            background-color: #2c2d30;
            box-shadow: inset 2px 2px 4px #202125, inset -2px -2px 0px #3e3e3e;
        }
        
        .flat-demo.arshia-dark .post-sidebar-toggle,
        .flat-demo.arshia-dark .search .form-group,
        .flat-demo.arshia-dark .aside-contents {
            background-color: rgba(52, 53, 57, 0.9) !important;
            box-shadow: 3px 3px 8px 0px rgba(45, 45, 45, 1) !important;
        }
        
        .flat-demo.arshia-dark .post-sidebar-content {
            background-color: #2c2d30 !important;
            box-shadow: -2px -3px 3px #202125, 3px 3px 3px #3e3e3e !important;
        }
        
        .flat-demo.arshia-dark .post-sidebar-toggle.open {
            background-color: rgba(0, 0, 0, 0.5) !important;
        }
        
        .arshia-dark #main>section {
            background-color: #2c2d30 !important;
            color: #fafafa;
        }
        
        .arshia-dark header {
            background-color: #2c2d30;
            box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .menu li a {
            box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .menu li a:hover,
        .arshia-dark .menu li a.active {
            box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .hero-images img {
            box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .hero-images .square img {
            box-shadow: none;
        }
        
        .arshia-dark .text-dark,
        .arshia-dark .hero-content,
        .arshia-dark .hero-social li a,
        .arshia-dark .social a,
        .arshia-dark .blog-single .modal-content {
            color: #fafafa !important;
        }
        
        .arshia-dark .text-muted,
        .arshia-dark .about .personal-info span,
        .arshia-dark .language-skill h4 span {
            color: #d2d2d2 !important;
        }
        
        .arshia-dark .blog-content h5 a.text-dark:hover,
        .arshia-dark .blog-content h5 a.text-dark:focus {
            color: #d2d2d2 !important;
        }
        
        .arshia-dark .hero-05:before {
            background-color: rgba(0, 0, 0, 0.6);
        }
        
        .arshia-dark .hero-04,
        .arshia-dark .testimonial .owl-carousel .testimonial-image::before,
        .arshia-dark .skill-box .skillbar,
        .arshia-dark .blog-item:before,
        .arshia-dark .blog-image,
        .arshia-dark .testimonial .owl-carousel .testimonial-image,
        .arshia-dark .blog-single .modal-content,
        .arshia-dark .portfolio-single .modal-content {
            background-color: #2c2d30;
        }
        
        .arshia-dark .box-border,
        .arshia-dark .box-hover-border,
        .arshia-dark .button-border,
        .arshia-dark .image-border {
            background-color: #2c2d30;
            box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .box-hover-border:hover {
            box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .pill-button:hover,
        .arshia-dark .pill-button.active {
            border: none;
            box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .testimonial .owl-carousel .testimonial-image::after,
        .arshia-dark .skill-box .skillbar,
        .arshia-dark .blog-image:after {
            box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .testimonial-image-border,
        .arshia-dark .testimonial .owl-carousel .testimonial-image-border {
            box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .testimonial .owl-dot.active span {
            box-shadow: -1px -1px 4px rgba(83, 83, 83, 0.4), 1px 1px 4px rgba(0, 0, 0, 0.35);
        }
        
        .arshia-dark .blog-intro {
            box-shadow: -2px -2px 7px rgba(83, 83, 83, 0.4), 2px 2px 7px rgba(0, 0, 0, 0.35);
        }
        
        .arshia-dark .contact .form-item .form-group {
            background-color: #2c2d30;
            box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
            -webkit-box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
            -moz-box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
            -o-box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
            -ms-box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
        }
        
        .arshia-dark .portfolio-single .close {
            color: white;
        }
        
        @media (min-width: 992px) {
            .flat-demo.arshia-dark .blog-single .post-sidebar-content {
                box-shadow: none !important;
            }
            .arshia-dark .blog-single .post-sidebar-content {
                box-shadow: none;
            }
        }
        /*-------------------------
        Flat Demo Light
  -------------------------*/
        
        .flat-demo #main>section {
            background-color: #f8f8f8;
        }
        
        .flat-demo .blog-single .modal-content,
        .flat-demo .portfolio-single .modal-content {
            background-color: #f8f8f8;
        }
        
        .flat-demo header {
            background: linear-gradient(135deg, #9a0dfe, #637dfb);
        }
        
        .flat-demo .testimonial-image-border {
            background-color: #f8f8f8;
        }
        
        .flat-demo .testimonial-image-border img {
            padding: 4px;
            background-color: transparent;
            border: 1px solid #d2d2d2;
            max-width: 100%;
            height: auto;
        }
        
        .flat-demo .skill-box .skillbar {
            background-color: #e1e1e1;
        }
        
        .flat-demo .menu li a {
            box-shadow: none;
        }
        
        .flat-demo .menu li a:hover,
        .flat-demo .menu li a.active {
            box-shadow: none;
        }
        
        .flat-demo .button-border {
            box-shadow: none;
            padding: 0;
        }
        
        .flat-demo .pill-button:hover,
        .flat-demo .pill-button.active,
        .flat-demo .testimonial .owl-dot.active span,
        .flat-demo .skill-box .skillbar,
        .flat-demo .blog-intro,
        .flat-demo .contact .form-item .form-group,
        .flat-demo .testimonial .owl-carousel .testimonial-image-border {
            box-shadow: none;
        }
        
        .flat-demo .pill-button,
        .flat-demo .portfolio-filter .pill-button.active,
        .flat-demo .portfolio-filter .pill-button:hover {
            color: #fafafa;
        }
        
        .flat-demo .image-border {
            box-shadow: none;
            background-color: transparent;
            padding: 0;
        }
        
        .flat-demo .box-border,
        .flat-demo .box-hover-border,
        .flat-demo .contact .form-item .form-group {
            background-color: #fefefe;
            box-shadow: none;
        }
        
        .flat-demo .testimonial .owl-carousel .testimonial-image::after,
        .flat-demo .testimonial .owl-carousel .testimonial-image::before,
        .flat-demo .blog-item::before,
        .flat-demo .blog-image::after {
            display: none;
        }
        
        .flat-demo .testimonial .owl-carousel .testimonial-image,
        .flat-demo .portfolio-filter .button-border {
            background-color: transparent;
        }
        
        .flat-demo .portfolio-filter .pill-button {
            color: #3c3c3c;
        }
        
        .flat-demo .blog-image {
            background-color: #f8f8f8;
            padding: 0;
        }
        /*-------------------------
        Flat Demo Dark
  -------------------------*/
        
        .arshia-dark.flat-demo .box-hover-border:hover {
            box-shadow: none;
        }
        
        .arshia-dark.flat-demo header,
        .arshia-dark.flat-demo .testimonial-image-border,
        .arshia-dark.flat-demo .blog-image,
        .arshia-dark.flat-demo .blog-single .modal-content,
        .arshia-dark.flat-demo .portfolio-single .modal-content {}
        
        .arshia-dark.flat-demo .testimonial-image-border img {
            border: 1px solid #3c3c3c;
        }
        
        .arshia-dark.flat-demo .box-border,
        .arshia-dark.flat-demo .box-hover-border,
        .arshia-dark.flat-demo .contact .form-item .form-group {
            background-color: rgba(52, 53, 57, 0.9);
        }
        
        .arshia-dark.flat-demo .box-hover-border:hover {
            box-shadow: none;
        }
        
        .arshia-dark.flat-demo .portfolio-filter .pill-button {
            color: #fafafa;
        }
        /*-------------------------
       Mono Color Light
  -------------------------*/
        
        .mono header .navbar-brand span,
        .mono header .navbar-brand b,
        .mono .menu li a,
        .mono .pill-button,
        .mono .language-skill ul li i {
            color: #3c3c3c;
        }
        
        .mono .base-color {
            color: #5f5f5f !important;
        }
        
        .mono .bg-base-color,
        .mono .testimonial .owl-dot.active span {
            background-color: #3c3c3c !important;
        }
        
        .mono .hero-social li a:hover,
        .mono .blog-link a:hover {
            color: #1a1a1a !important;
        }
        
        .mono .timeline-icon {
            border: 1px solid #3c3c3c;
            background-color: #3c3c3c;
        }
        
        .mono .timeline-item::before {
            border: 1px solid #3c3c3c;
        }
        
        .mono .timeline-year,
        .mono .portfolio .portfolio-icon a:first-child,
        .mono .portfolio .portfolio-icon a {
            color: #5f5f5f;
        }
        
        .mono .skill-box .fill-skillbar {
            background-color: #3c3c3c;
        }
        
        .mono .portfolio .portfolio-item-content::before {
            background-color: rgba(60, 60, 60, 0.9);
        }
        
        .mono .loader {
            border-top: 4px solid #3c3c3c !important;
        }
        
        .mono .menu-toggler span {
            background-color: #3c3c3c;
        }
        
        .mono .floating {
            background: #2c2d30;
        }
        
        .mono .circle-2 {
            background: #3c3c3c;
        }
        
        .mono .circle {
            background: #e1e1e1;
        }
        /*-------------------------
        Mono Color Dark
  -------------------------*/
        
        .mono.arshia-dark .text-white {
            color: #3c3c3c !important;
        }
        
        .mono.arshia-dark header .navbar-brand span,
        .mono.arshia-dark header .navbar-brand b,
        .mono.arshia-dark .menu li a,
        .mono.arshia-dark .pill-button,
        .mono.arshia-dark .language-skill ul li i {
            color: #fafafa;
        }
        
        .mono.arshia-dark .base-color {
            color: #dedede !important;
        }
        
        .mono.arshia-dark .bg-base-color {
            background-color: #f8f8f8 !important;
        }
        
        .mono.arshia-dark .hero-social li a:hover,
        .mono.arshia-dark .blog-link a:hover {
            color: #a1a1a1 !important;
        }
        
        .mono.arshia-dark .timeline-icon {
            border: 1px solid #dedede;
            background-color: #dedede;
        }
        
        .mono.arshia-dark .timeline-item::before {
            border: 1px solid #dedede;
        }
        
        .mono.arshia-dark .timeline-year,
        .mono.arshia-dark .portfolio .portfolio-icon a:first-child,
        .mono.arshia-dark .portfolio .portfolio-icon a {
            color: #dedede;
        }
        
        .mono.arshia-dark .skill-box .fill-skillbar,
        .mono.arshia-dark .testimonial .owl-dot.active span {
            background-color: #dedede;
        }
        
        .mono.arshia-dark .testimonial .owl-carousel .owl-dot span {
            background-color: #3c3c3c;
        }
        
        .mono.arshia-dark .testimonial .owl-carousel .owl-dot.active span {
            background-color: #dedede !important;
        }
        
        .mono.arshia-dark .portfolio .portfolio-item-content::before {
            background-color: rgba(250, 250, 250, 0.8);
        }
        
        .mono.arshia-dark .portfolio .img-overlay-content h5 {
            color: #3c3c3c;
        }
        
        .mono.arshia-dark .portfolio .portfolio-icon a:first-child,
        .mono.arshia-dark .portfolio .portfolio-icon a {
            background-color: #3c3c3c;
        }
        
        .mono.arshia-dark .menu-toggler span {
            background-color: #fafafa;
        }
        
        .mono.arshia-dark .floating {
            background: #f8f8f8;
        }
        
        .mono.arshia-dark .circle-2 {
            background: #dedede;
        }
        
        .mono.arshia-dark .circle {
            background: #e1e1e1;
        }
        /*-------------------------
           Flat Mono
  -------------------------*/
        
        .mono.flat-demo .pill-button {
            background-color: #5f5f5f;
            border: 1px solid #5f5f5f;
            color: #fafafa !important;
        }
        
        .mono.flat-demo .pill-button:hover {
            background-color: #3c3c3c;
            border: 1px solid #3c3c3c;
        }
        
        .mono.flat-demo .portfolio-filter .pill-button {
            background-color: transparent;
            border: none;
            color: #3c3c3c !important;
        }
        
        .mono.flat-demo .portfolio-filter .pill-button.active,
        .mono.flat-demo .portfolio-filter .pill-button:hover {
            color: #fafafa !important;
            background-color: #3c3c3c;
        }
        /*-------------------------
       Dark Flat Mono
  -------------------------*/
        
        .arshia-dark.mono.flat-demo .pill-button {
            background-color: #fafafa;
            border: 1px solid #fafafa;
            color: #5f5f5f !important;
        }
        
        .arshia-dark.mono.flat-demo .pill-button:hover {
            background-color: #dedede;
            border: 1px solid;
        }
        
        .arshia-dark.mono.flat-demo .portfolio-filter .pill-button {
            background-color: transparent;
            border: none;
            color: #d2d2d2 !important;
        }
        
        .arshia-dark.mono.flat-demo .portfolio-filter .pill-button.active,
        .arshia-dark.mono.flat-demo .portfolio-filter .pill-button:hover {
            background-color: #dedede;
            color: #5f5f5f !important;
        }
        
        .arshia-dark.mono.flat-demo .skill-box .skillbar {
            background-color: #3c3c3c !important;
        }
        /*-------------------------------
       Dark Media (IOS, MAC & ...)
  -------------------------------*/
        
        @media (prefers-color-scheme: dark) {
            .hero-01 {
                background: url("../img/hero-001.jpg");
                background-repeat: no-repeat;
                background-size: cover;
            }
            .hero-02:before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.8);
            }
            .post-sidebar-toggle,
            .post-sidebar-content,
            .aside-contents {
                background-color: #2c2d30 !important;
                box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
            }
            .post-sidebar-toggle span,
            .post-sidebar-toggle span:before {
                background: #fafafa !important;
            }
            .search .form-group button,
            .aside-item ul li a,
            .search .form-group input::placeholder,
            .breadcrumb li a,
            .blog-single .entry-meta li a i,
            .comment-reply-link,
             ::placeholder {
                color: #fafafa !important;
            }
            .search .form-group {
                background-color: #2c2d30 !important;
                box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
            }
            .comments-devider {
                background-color: #2c2d30 !important;
                box-shadow: inset 2px 2px 4px #202125, inset -2px -2px 0px #3e3e3e;
            }
            .flat-demo .post-sidebar-toggle,
            .flat-demo .search .form-group,
            .flat-demo .aside-contents {
                background-color: rgba(52, 53, 57, 0.9) !important;
                box-shadow: 3px 3px 8px 0px rgba(45, 45, 45, 1) !important;
            }
            .flat-demo .post-sidebar-content {
                background-color: #2c2d30 !important;
                box-shadow: -2px -3px 3px #202125, 3px 3px 3px #3e3e3e !important;
            }
            .flat-demo .post-sidebar-toggle.open {
                background-color: rgba(0, 0, 0, 0.5) !important;
            }
            #main>section {
                background-color: #2c2d30 !important;
                color: #fafafa;
            }
            header {
                box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
            }
            .menu li a {
                box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
                color: white;
            }
            .menu li a:hover,
            .menu li a.active {
                box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
            }
            .hero-images img {
                box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
            }
            .hero-images .square img {
                box-shadow: none;
            }
            .text-dark,
            .hero-content,
            .hero-social li a,
            .social a,
            .blog-single .modal-content {
                color: #fafafa !important;
            }
            .text-muted,
            .about .personal-info span,
            .language-skill h4 span {
                color: #ffc94b !important;
                font-weight: 500;
            }
            .blog-content h5 a.text-dark:hover,
            .blog-content h5 a.text-dark:focus {
                color: #d2d2d2 !important;
            }
            .hero-05:before {
                background-color: rgba(0, 0, 0, 0.6) !important;
            }
            .hero-04,
            .testimonial .owl-carousel .testimonial-image::before,
            .skill-box .skillbar,
            .blog-item:before,
            .blog-image,
            .testimonial .owl-carousel .testimonial-image,
            .blog-single .modal-content,
            .portfolio-single .modal-content {
                background-color: #2c2d30 !important;
            }
            .box-border,
            .box-hover-border,
            .button-border,
            .image-border {
                background-color: #2c2d30;
                box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
            }
            .box-hover-border:hover {
                box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
            }
            .pill-button:hover,
            .pill-button.active {
                border: none;
                box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
            }
            .testimonial .owl-carousel .testimonial-image::after,
            .skill-box .skillbar,
            .blog .blog-image:after {
                box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
            }
            .testimonial-image-border,
            .testimonial .owl-carousel .testimonial-image-border {
                box-shadow: 3px 3px 3px #202125, -3px -3px 3px #3e3e3e;
            }
            .testimonial .owl-carousel .owl-dot.active span {
                box-shadow: -1px -1px 4px rgba(83, 83, 83, 0.4), 1px 1px 4px rgba(0, 0, 0, 0.35);
            }
            .blog .blog-intro {
                box-shadow: -2px -2px 7px rgba(83, 83, 83, 0.4), 2px 2px 7px rgba(0, 0, 0, 0.35);
            }
            .contact .form-item .form-group {
                background-color: #2c2d30 !important;
                box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
                -webkit-box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
                -moz-box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
                -o-box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
                -ms-box-shadow: inset 3px 3px 3px #202125, inset -3px -3px 3px #3e3e3e;
            }
            .portfolio-single .close {
                color: white;
            }
            .flat-demo .box-hover-border:hover {
                box-shadow: none;
            }
            .flat-demo header,
            .flat-demo .testimonial-image-border,
            .flat-demo .blog-image,
            .flat-demo .blog-single .modal-content,
            .flat-demo .portfolio-single .modal-content {}
            .flat-demo .testimonial-image-border img {
                border: 1px solid #3c3c3c;
            }
            .flat-demo .box-border,
            .flat-demo .box-hover-border,
            .flat-demo .contact .form-item .form-group {
                background-color: rgba(52, 53, 57, 0.9) !important;
            }
            .flat-demo .box-hover-border:hover {
                box-shadow: none;
            }
            .flat-demo .portfolio-filter .pill-button {
                color: #fafafa !important;
            }
            .mono .text-white {
                color: #3c3c3c !important;
            }
            .mono header .navbar-brand span,
            .mono header .navbar-brand b,
            .mono .menu li a,
            .mono .pill-button,
            .mono .language-skill ul li i {
                color: #fafafa !important;
            }
            .mono .base-color {
                color: #dedede !important;
            }
            .mono .bg-base-color {
                background-color: #f8f8f8 !important;
            }
            .mono .hero-social li a:hover,
            .mono .blog-link a:hover {
                color: #a1a1a1 !important;
            }
            .mono .timeline-icon {
                border: 1px solid #dedede;
                background-color: #dedede !important;
            }
            .mono .timeline-item::before {
                border: 1px solid #dedede;
            }
            .mono .timeline-year,
            .mono .portfolio .portfolio-icon a:first-child,
            .mono .portfolio .portfolio-icon a {
                color: #dedede !important;
            }
            .mono .skill-box .fill-skillbar,
            .mono .testimonial .owl-dot.active span {
                background-color: #dedede !important;
            }
            .mono .testimonial .owl-carousel .owl-dot span {
                background-color: #3c3c3c !important;
            }
            .mono .testimonial .owl-carousel .owl-dot.active span {
                background-color: #dedede !important;
            }
            .mono .portfolio .portfolio-item-content::before {
                background-color: rgba(250, 250, 250, 0.8) !important;
            }
            .mono .portfolio .img-overlay-content h5 {
                color: #3c3c3c;
            }
            .mono .portfolio .portfolio-icon a:first-child,
            .mono .portfolio .portfolio-icon a {
                background-color: #3c3c3c;
            }
            .mono .menu-toggler span {
                background-color: #fafafa;
            }
            .mono .floating {
                background: #f8f8f8;
            }
            .mono .circle-2 {
                background: #dedede;
            }
            .mono .circle {
                background: #e1e1e1;
            }
            .mono.flat-demo .pill-button {
                background-color: #fafafa;
                border: 1px solid #fafafa;
                color: #5f5f5f !important;
            }
            .mono.flat-demo .pill-button:hover {
                background-color: #dedede;
                border: 1px solid;
            }
            .mono.flat-demo .portfolio-filter .pill-button {
                background-color: transparent;
                border: none;
                color: #d2d2d2 !important;
            }
            .mono.flat-demo .portfolio-filter .pill-button.active,
            .mono.flat-demo .portfolio-filter .pill-button:hover {
                background-color: #dedede !important;
                color: #5f5f5f !important;
            }
            .mono.flat-demo .skill-box .skillbar {
                background-color: #3c3c3c !important;
            }
            .color-scheme-title,
            .color-scheme {
                display: none !important;
            }
            @media (min-width: 992px) {
                .flat-demo .blog-single .post-sidebar-content {
                    box-shadow: none !important;
                }
                .blog-single .post-sidebar-content {
                    box-shadow: none;
                }
            }
        }
        
        .rounded-circle {
            border-radius: 49% !important;
            width: 350px;
            height: 350px;
        }
        
        .col-1,
        .col-2,
        .col-3,
        .col-4,
        .col-5,
        .col-6,
        .col-7,
        .col-8,
        .col-9,
        .col-10,
        .col-11,
        .col-12,
        .col,
        .col-auto,
        .col-sm-1,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-5,
        .col-sm-6,
        .col-sm-7,
        .col-sm-8,
        .col-sm-9,
        .col-sm-10,
        .col-sm-11,
        .col-sm-12,
        .col-sm,
        .col-sm-auto,
        .col-md-1,
        .col-md-2,
        .col-md-3,
        .col-md-4,
        .col-md-5,
        .col-md-6,
        .col-md-7,
        .col-md-8,
        .col-md-9,
        .col-md-10,
        .col-md-11,
        .col-md-12,
        .col-md,
        .col-md-auto,
        .col-lg-1,
        .col-lg-2,
        .col-lg-3,
        .col-lg-4,
        .col-lg-5,
        .col-lg-6,
        .col-lg-7,
        .col-lg-8,
        .col-lg-9,
        .col-lg-10,
        .col-lg-11,
        .col-lg-12,
        .col-lg,
        .col-lg-auto,
        .col-xl-1,
        .col-xl-2,
        .col-xl-3,
        .col-xl-4,
        .col-xl-5,
        .col-xl-6,
        .col-xl-7,
        .col-xl-8,
        .col-xl-9,
        .col-xl-10,
        .col-xl-11,
        .col-xl-12,
        .col-xl,
        .col-xl-auto {
            position: relative;
            width: 100%;
            padding-right: 0px;
        }
        /* 
.hover-fold {
     border: 0px rgba(255, 255, 255, 0) solid;
    height: 300px;
    margin: 10px auto;
    -moz-perspective: 1500;
    -webkit-perspective: 1500;
    perspective: 1500;
    position: relative;
    width: 400px;
} */
        
  .hover-fold {
/* background: #e8c63d; */
border: 0px rgba(255, 255, 255, 0) solid;
height: 576px;
margin: 10px auto;
-moz-perspective: 1500;
-webkit-perspective: 1500;
perspective: 1500;
position: relative;
width: 571px;
}
        
        .hover-fold h2 {
            border-bottom: 1px solid #333;
            margin: 0 40px;
            padding: 110px 0 2px;
        }
        
        .hover-fold .top {
            height: 50%;
            -moz-transition: all 0.5s ease-out;
            -o-transition: all 0.5s ease-out;
            -webkit-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
            -moz-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
            -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
            -moz-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -moz-transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            position: absolute;
            top: 0px;
            width: 100%;
            z-index: 10;
        }
        
        .hover-fold .top .face {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            position: absolute;
        }
        
        .hover-fold:hover .top {
            -moz-transform: rotateX(-180deg);
            -ms-transform: rotateX(-180deg);
            -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
        }
        
        .hover-fold .front {
            background: url("../../covercv.png");
            height: 100%;
            /*has to be 100% of .top */
            width: 100%;
        }
        
        .hover-fold .back {
            background: #e8c63d;
            height: 100%;
            /*has to be 100% of .top */
            padding: 0 40px;
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
            width: 100%;
        }
        
        .hover-fold .back p {
            margin: 0;
        }
        
        .hover-fold .bottom {
            background: url("../../covercv.png") bottom;
            height: 50%;
            position: absolute;
            top: 50%;
            width: 100%;
            z-index: 0;
        }
        
        @media (min-width: 1200px) {
            .container {
                max-width: 1340px;
            }
        }
        
        p {
            font-weight: 800;
            margin-top: 0;
            font-size: 18px;
            margin-bottom: 0.5rem;
            color: rgb(210, 210, 210);
        }
        
        th {
            padding-top: 14px;
            padding-bottom: 0px;
            /* column-width: 123px; */
        }
        
        #skillwork {
            text-align: center;
            position: relative;
            color: rgb(255, 203, 77);
            font-size: 21px;
            padding-bottom: 20px;
        }
        
        .walid {
            font-size: 20px;
            font-weight: 800;
        }
        
        h6,
        .h6 {
            font-weight: 600;
            font-size: 1rem;
        }
        
        .menus {
            position: relative;
            padding: 5px;
            padding-top: 12px;
            width: 373px;
            display: flex;
            background: linear-gradient(135deg, #9a0dfe, #637dfb);
            box-shadow: 0px 0px 9px #ddae3f, 0px 0px 0px #ddae3f;
            border-radius: 4px;
            z-index: 3;
        }
        
        .fa {
            font-size: 24px;
            position: relative;
            top: 3px;
            opacity: 0.7;
        }
        
        .fa-cog {
            position: relative;
            left: 3px;
        }
        
        .menu_text {
            padding-left: 10px;
        }
        
        .menu_box {
            background: #000;
            box-shadow: 0 2px 12px 0 rgba(91, 41, 191, 0.5);
            border-radius: 4px;
            position: absolute;
            bottom: calc(100% + 14px);
            left: 0;
            width: 192px;
            padding: 10px;
            opacity: 0;
            -moz-transform: translateY(100%) translateX(-30%) scale(0.1);
            -ms-transform: translateY(100%) translateX(-30%) scale(0.1);
            -webkit-transform: translateY(100%) translateX(-30%) scale(0.1);
            transform: translateY(100%) translateX(-30%) scale(0.1);
            -moz-transition: all 0.2s;
            -o-transition: all 0.2s;
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
        }
        
        .menu_box:after {
            content: "";
            position: absolute;
            left: 20px;
            bottom: -20px;
            border: 10px solid transparent;
            border-top: 10px solid #6e6b6b;
        }
        
        .menu_list {
            color: #fff;
            font-size: 14px;
            line-height: 18px;
            opacity: 0.7;
        }
        
        .menu_label {
            position: relative;
            cursor: pointer;
            font-size: 20px;
            line-height: 30px;
            color: #fff;
            width: 44px;
            overflow: hidden;
            display: flex;
            padding: 0 10px;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0);
            box-sizing: border-box;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }
        
        .menu_label:hover .fa {
            opacity: 1;
        }
        
        .menu_text {
            opacity: 0;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }
        
        .menu_input[type=radio] {
            display: none;
        }
        
        .menu_input[type=radio]:checked+.menu_label {
            background-color: rgba(255, 255, 255, 0.3);
            width: 140px;
        }
        
        .menu_input[type=radio]:checked+.menu_label .fa {
            opacity: 1;
        }
        
        .menu_input[type=radio]:checked+.menu_label .menu_text {
            opacity: 1;
        }
        
        .menu_input[type=radio]:checked+.menu_label+.menu_box {
            opacity: 1;
            -moz-transform: translateY(0) translateX(0) scale(1);
            -ms-transform: translateY(0) translateX(0) scale(1);
            -webkit-transform: translateY(0) translateX(0) scale(1);
            transform: translateY(0) translateX(0) scale(1);
            background: linear-gradient(135deg, #9a0dfe, #637dfb);
            box-shadow: 2px 1px 11px #ddae3f, 0px 0px 0px #ddae3f;
        }
        
        .rabbit {
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 3;
            fill: #fff;
        }
        
        #container {
            margin-left: 0 !important;
            /* max-width: 1940px !important; */
        }
        
        a {
            color: #ffffff;
            font-weight: 600;
        }
        @media (min-width: 200px)   {
            #socialwalid {
                position: fixed;
                bottom: 0;
                align-items: center;
                left: 600;
            }
       
        }
    
        @media (min-width: 200px) and (max-width:992px) {
    
            .rounded-circle {
                margin-top: -90px;
            }
        }
        
        @media (max-width:1107px) {
            #socialwalid {
                left: 400 !important;
            }
        }
        
        @media (max-width:992px) {
            #socialwalid {
                left: 200 !important;
            }
            .rounded-circle {
                left: 240px;
            }
        }
        
        @media (max-width:725px) {
            #socialwalid {
                left: 100 !important;
            }
            .rounded-circle {
                left: 140px;
            }
        }
        
        @media (max-width:625px) {
            .rounded-circle {
                left: 100px;
            }
        }
        
        @media (max-width:575px) {
            #socialwalid {
                left: 60 !important;
            }
            .rounded-circle {
                left: 20px;
            }
        }
        
        @media (max-width:728px) {
            #socialwalid {
                left: 60 !important;
            }
        }
        
        @media (min-width: 983px) and (max-width:1560px) {
            #socialwalid {
                position: fixed;
                bottom: 0;
                left: 600;
            }
        }
        
        @media (min-width: 200px) and (max-width:500px) {
            .row {
     display: flex !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -21px;
}
            .hero-03 .hero-content {
                margin-top: -150px;
                padding-top: 70px;
                padding-left: 0 px;
            }
            .hero-06 .hero-images img {
                width: 200px;
                height: 200px;
            }
            #rowmobile {
                margin-left: -120px;
            }
            #imgmobile2 {
                padding-top: 250px;
                margin-bottom: -150px;
            }
            #socialwalid {
                left: 0px !important;
            }
            .menus {
                width: 251px;
            }
            #indxsocial {
                z-index: 3 !important;
            }
        }
        
        .menu-toggler span {
            background-color: #ddae3f;
        }
        
        .lni-close:before {
            content: url(/assets/img/svg/more.png) !important;
        }
        
        #ali {
            text-align: left !important;
        }
        
        body {
          background: #2c2d30 !important;
        }
        
        .categories ul {
            list-style: none;
            padding: 0;
            margin: 0;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .categories ul li {
            display: inline-block;
            padding: 0;
            line-height: 24px;
            background: transparent;
            margin: 0;
            margin-left: 5px;
            margin-bottom: 10px;
        }
        
        .categories ul li a {
            display: block;
            font-size: 18px;
            font-weight: 500;
            padding: 10px 20px;
            border-radius: 5px;
            border: 2px solid transparent;
            -webkit-transition: all .2s ease-out;
            transition: all .2s ease-out;
        }
        
        .categories ul li a,
        .categories ul li a:active,
        .categories ul li a:hover {
            line-height: 24px;
            background: #fff;
            color: #4E5961;
            text-decoration: none;
        }
        
        .categories ul li a:hover,
        .categories ul li.active a {
            color: #fff;
            background: #5cc9df;
        }
        
        .projects-container .row {
            -webkit-transition: height .5s ease-out;
            transition: height .5s ease-out;
        }
        
        .portfolio-item {
            position: relative;
            margin-bottom: 30px;
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
            -webkit-transition: all .4s ease-out;
            transition: all .4s ease-out;
        }
        
        .portfolio-item.filtered {
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            opacity: 0.2;
            cursor: default;
        }
        
        .no-opacity .portfolio-item.filtered {
            display: none;
        }
        
        .portfolio-item.filtered a {
            cursor: default;
        }
        
        .portfolio-item.filtered .enlarge,
        .portfolio-item.filtered .link,
        .portfolio-item.filtered .overlay-mask,
        .portfolio-item.filtered .project-title {
            display: none;
        }
        
        .portfolio-thumb {
            display: block;
            position: relative;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        
        .scrollimation .portfolio-thumb {
            -webkit-transform: translateY(100px);
            transform: translateY(100px);
            opacity: 0;
            -webkit-transition: opacity .4s ease-out, -webkit-transform .4s ease-out;
            transition: opacity .4s ease-out, transform .4s ease-out;
        }
        
        .touch .scrollimation .portfolio-thumb,
        .scrollimation .portfolio-thumb.in {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
            opacity: 1;
        }
        
        .portfolio-thumb .overlay-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #5CC9DF;
            opacity: 0;
            filter: alpha(opacity=0);
            z-index: 1;
            -webkit-transition: opacity .3s ease-out;
            transition: opacity .3s ease-out;
        }
        
        .portfolio-thumb:hover .overlay-mask {
            opacity: 0.8;
            filter: alpha(opacity=80);
        }
        
        .portfolio-thumb .enlarge,
        .portfolio-thumb .link {
            display: inline-block;
            margin: 0;
            margin-top: -25px;
            font-size: 50px;
            line-height: 50px;
            color: #fff;
            opacity: 0;
            filter: alpha(opacity=0);
            position: absolute;
            height: 50px;
            width: 64px;
            top: 40%;
            left: 50%;
            text-align: center;
            z-index: 3;
        }
        
        .portfolio-thumb .enlarge {
            margin-left: -84px;
            -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
            -webkit-transition: all .3s ease-out;
            transition: all .3s ease-out;
        }
        
        .portfolio-thumb:hover .enlarge {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
            filter: alpha(opacity=100);
            -webkit-transition: all .3s ease-out .3s;
            transition: all .3s ease-out .3s;
        }
        
        .portfolio-thumb .link {
            margin-left: 20px;
            -webkit-transform: translateX(200px);
            transform: translateX(200px);
            -webkit-transition: all .3s ease-out;
            transition: all .3s ease-out;
        }
        
        .portfolio-thumb:hover .link {
            -webkit-transform: translate(0);
            transform: translate(0);
            opacity: 1;
            filter: alpha(opacity=100);
            -webkit-transition: all .3s ease-out .6s;
            transition: all .3s ease-out .6s;
        }
        
        .portfolio-thumb .enlarge.centered,
        .portfolio-thumb .link.centered {
            margin-left: -32px;
            -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
        }
        
        .portfolio-thumb:hover .enlarge.centered,
        .portfolio-thumb:hover .link.centered {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
        }
        
        .portfolio-thumb .project-title {
            display: block;
            width: 100%;
            position: absolute;
            bottom: -100px;
            background: #fff;
            margin: 0;
            padding: 20px 0;
            font-size: 21px;
            font-weight: 300;
            color: #777;
            text-align: center;
            z-index: 2;
            -webkit-transition: bottom .4s ease-out, color .2s ease-out;
            transition: bottom .4s ease-out, color .2s ease-out;
        }
        
        .portfolio-thumb:hover .project-title {
            bottom: 0;
            -webkit-transition: bottom .3s ease-out .1s, color .2s ease-out 0s;
            transition: bottom .3s ease-out .1s, color .2s ease-out 0s;
        }
        
        .portfolio-thumb .project-title:hover {
            color: #5CC9DF;
        }
        
        .portfolio .portfolio-item-content::before {
            background-color: rgba(221, 174, 63, 0);
        }
        
        .dropdown-menu>li>a:hover,
        .dropdown-menu>li>a:focus {
            text-decoration: none;
            color: #ffffff;
            background-color: #f3969a;
        }
        
        .toast {
            display: -ms-flexbox !important;
            display: contents !important;
            -ms-flex-align: center !important;
            align-items: center !important;
            padding: 0.25rem 0.75rem !important;
            color: #6c757d !important;
            background-color: rgba(255, 205, 32, 0.85) !important;
            background-clip: padding-box !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
            border-radius: 20px !important;
        }
        
        .invalid-feedback {
           color: rgba(255, 117, 147, 1) !important;
margin-top: -19px !important;
font-size: 12;
text-align: left;
        }
        
        @media (min-width: 200px) and (max-width:992px) {
            .row {
                display: flow-root;
            }
        }
        
        @media (min-width: 200px) and (max-width:320px) {
            #table {
                width: 300px !important;
            }
        }
        
        @media (min-width: 768px) and (max-width:992px) {
            .row {
                display: flex;
            }
            #rowmobile {
                margin-left: -120px;
            }
        }
        
        @media (min-width:993px) and (max-width: 1024px) {
            #imgpropos {
                -ms-flex: 0 0 100% !important;
                flex: 0 0 100% !important;
                max-width: 100% !important;
            }
        }
        
        @-webkit-keyframes ani-mouse {
            0% {
                opacity: 1;
                top: 29%;
            }
            15% {
                opacity: 1;
                top: 50%;
            }
            50% {
                opacity: 0;
                top: 50%;
            }
            100% {
                opacity: 0;
                top: 29%;
            }
        }
        
        @-moz-keyframes ani-mouse {
            0% {
                opacity: 1;
                top: 29%;
            }
            15% {
                opacity: 1;
                top: 50%;
            }
            50% {
                opacity: 0;
                top: 50%;
            }
            100% {
                opacity: 0;
                top: 29%;
            }
        }
        
        @keyframes ani-mouse {
            0% {
                opacity: 1;
                top: 29%;
            }
            15% {
                opacity: 1;
                top: 50%;
            }
            50% {
                opacity: 0;
                top: 50%;
            }
            100% {
                opacity: 0;
                top: 29%;
            }
        }
        
        .scroll-btn {
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            text-align: center;
        }
        
        .scroll-btn>* {
            display: inline-block;
            line-height: 18px;
            font-size: 13px;
            font-weight: normal;
            color: #7f8c8d;
            color: #ffffff;
            font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
            letter-spacing: 2px;
        }
        
        .scroll-btn>*:hover,
        .scroll-btn>*:focus,
        .scroll-btn>*.active {
            color: #ffffff;
        }
        
        .scroll-btn>*:hover,
        .scroll-btn>*:focus,
        .scroll-btn>*:active,
        .scroll-btn>*.active {
            opacity: 0.8;
            filter: alpha(opacity=80);
        }
        
        .scroll-btn .mouse {
            position: relative;
            display: block;
            width: 35px;
            height: 55px;
            margin: 0 auto 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 3px solid #ddae3f;
            border-radius: 23px;
        }
        
        .scroll-btn .mouse>* {
            position: absolute;
            display: block;
            top: 29%;
            left: 50%;
            width: 8px;
            height: 8px;
            margin: -4px 0 0 -4px;
            background: #ddae3f;
            border-radius: 50%;
            -webkit-animation: ani-mouse 2.5s linear infinite;
            -moz-animation: ani-mouse 2.5s linear infinite;
            animation: ani-mouse 2.5s linear infinite;
        }
        /* .hover-fold {
         border: 0 px rgba(255, 255, 255, 0) solid;
        height: 760 px;
        margin: 10 px auto;
        -moz-perspective: 1500;
        -webkit-perspective: 1500;
        perspective: 1500;
        position: relative;
        width: 570 px;
    } */
        
        @media (min-width: 200px) and (max-width:500px) {
            .mt-4, .my-4 {
    margin-top: -8.5rem !important;
    font-weight: 800;
}
            #textpropos {
                padding-right: 208px !important;
                font-size: 12px !important;
            }
        }
       
.text-muted, .about .personal-info span, .language-skill h4 span {
    color: #ffc94b !important;
    font-weight: 500;
}
.text-dark, .hero-content, .hero-social li a, .social a, .blog-single .modal-content {
    color: #fafafa !important;
}
#main>section {
    background-color: #2c2d30 !important;
    color: #fafafa;
}
.flat-demo .box-border, .flat-demo .box-hover-border, .flat-demo .contact .form-item .form-group {
    background-color: rgba(52, 53, 57, 0.9) !important;
}
#main>section {
    background-color: #2c2d30 !important;
    color: #fafafa;
}
.flat-demo .portfolio-filter .pill-button {
    color: #fafafa !important;
}
.menu li a {
 color: white  !important;
}



 
.flat-demo .skill-box .skillbar {
background: rgb(43, 43, 43) !important; }
 
        @media (min-width: 200px) and (max-width:600px) {  
            .hover-fold .front {
    visibility: hidden;
            }
            
            .hover-fold .bottom {
                    visibility: hidden;

}
#textpropos {
padding-right: 200px !important;}
.hover-fold {
      max-height: 53%;
}
            
      .hover-fold .back {
    background: none;
}
}
        @media (min-width: 200px) and (max-width:380px) {  
            #textpropos {
padding-right: 250px !important;}
}
        @media (min-width: 200px) and (max-width:320px) {  
            #textpropos {
padding-right: 280px !important;}
.hover-fold {
      max-height: 53%;
}

}

div > a { 
    display: table-column-group;
}
.menu_text > a
{
        display: block !important;

}
.menu_box .menu_list
{
            display: block !important;

    
}

@media (min-width: 321px) and (max-width: 500px)
{
#socialwalid {
    left: 35px !important;
}
}

@media (min-width: 501px) and (max-width: 600px)
{
#textpropos {
    padding-right: 90px  !important;
    font-size: 12px !important;
}
}
.disclaimer{
     display: none;
    
    }