 
  /*-----------------------------------------------------------
 * Template Name    : NOVA - Fully Responsive Personal Template
 * Author           : Toonalite Group
 * Version          : 1.0.0
 * Created          : August 2021
 * File Description : Main Css file of the template
 *------------------------------------------------------------*/
 /*--------------------
        GENERAL
--------------------*/
 
 body {
     font-family: 'Poppins', sans-serif;
     font-weight: 300;
     color: #444;
     font-size: 16px;
     scroll-behavior: smooth;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .h1 {
     font-family: 'Poppins', sans-serif;
     font-weight: 300;
     line-height: 1.618;
 }
 
 a,
 a:hover {
     text-decoration: none !important;
 }
 
 a,
 button {
     outline: none !important;
 }
 
 button {
     box-shadow: none !important;
 }
 
 .full-screen {
     height: 100vh;
 }
 
 .py-6 {
     padding-top: 100px;
     padding-bottom: 100px;
 }
 
 .pb-6 {
     padding-bottom: 100px;
 }
 
 .pt-6 {
     padding-top: 100px;
 }
 
 .mt-6 {
     margin-top: 100px;
 }
 
 .ms-6 {
     margin-left: 120px;
 }
 
 .title h4 {
     font-size: 42px;
     font-weight: 600;
 }
 
 .title h2 {
     margin-bottom: 2.5rem;
     font-weight: 600 !important;
     font-size: 42px;
 }
 
 .header-title {
     font-size: 42px !important;
     font-weight: 600;
 }
 
 .pill-button {
     flex: 1 1 auto;
     margin-right: 10px;
     padding: 12px 24px;
     text-align: center;
     text-transform: uppercase;
     transition: 0.5s;
     background-size: 200% auto;
     color: #fff;
     border-radius: 25px;
     text-decoration: none;
     margin-top: 12px;
     display: inline-block;
 }
 
 .pill-button:hover {
     background-position: right center;
     color: #fff;
 }
 
 .pill-button02:hover {
     background-position: 0 100%;
 }
 label{
     display: block;
 }
 /*-------------------------
        PRELOADER
-------------------------*/
 
 .showbox {
     position: fixed;
     background: #fff;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
     cursor: default;
     z-index: 10000;
 }
 
 .loader {
     position: relative;
     margin: 0 auto;
     width: 100px;
 }
 
 .loader::before {
     content: "";
     display: block;
     padding-top: 100%;
 }
 
 .circular {
     animation: rotate 2s linear infinite;
     height: 100%;
     transform-origin: center center;
     width: 100%;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
 }
 
 .path {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
     animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
     stroke-linecap: round;
 }
 
 @keyframes rotate {
     100% {
         transform: rotate(360deg);
     }
 }
 
 @keyframes dash {
     0% {
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0;
     }
     50% {
         stroke-dasharray: 89, 200;
         stroke-dashoffset: -35px;
     }
     100% {
         stroke-dasharray: 899, 200;
         stroke-dashoffset: -124px;
     }
 }
 
 @keyframes color {
     100% {}
     0% {
         stroke: red;
     }
     40% {
         stroke: blue;
     }
     66% {
         stroke: green;
     }
     80% {}
     90% {
         stroke: yellow;
     }
 }
 /*-----------------------
        header
-------------------------*/
 
 .header {
     transition: 0.7s all ease;
     background-color: #fff;
     padding: 0px;
 }
 
 .inner-page-header {
     box-shadow: 0px 0px 20px 0px rgba(180, 180, 180, 0.3);
 }
 
 .header .nav-link {
     margin: 0 8px;
     transition: all ease 0.3s;
 }
 
 .header a {
     color: #444;
 }
 
 .header .nav-link:hover,
 .header .nav-link.active,
 .header .nav-link:focus {
     background-color: transparent;
 }
 
 .header .navbar-toggler:focus {
     box-shadow: none;
 }
 
 .header-sticky {
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
     border-bottom: none !important;
     padding: 0px;
 }
 
 .header-icon {
     -webkit-text-fill-color: #444;
 }
 /*-------------------------
         HERO
-------------------------*/
 
 .hero {
     background: url(../img/hero.png) no-repeat;
     height: 100vh;
     background-size: cover;
     background-position: bottom;
     /* overflow-x: hidden; */
     position: relative;
 }
 
 .hero-center {
     position: relative;
     top: 50%;
     transform: translateY(-43%);
 }
 
 .hero-content h2 {
     font-weight: 600;
     font-size: 65px;
 }
 
 .hero-content span {
     font-weight: 300;
     font-size: 65px;
 }
 
 .hero-content p {
     margin: 20px 0 40px 0;
 }
 
 .pill-button-video {
     font-size: 45px;
     display: inline-block;
     position: relative;
     top: 13px;
     color: #444;
     transition: all 0.5s ease;
 }
 
 .canvas.particles-js-canvas-el {
     position: absolute;
     top: 0;
     z-index: 1;
 }
 
 .particles-js-canvas-el {
     position: absolute;
     top: 0;
     z-index: 1000;
 }
 
 .hero-img img {
     width: 100%;
 }
 /*-------------------------
         ABOUT
-------------------------*/
 
 .about {
     position: relative;
 }
 
 .shape {
     position: absolute;
     z-index: -1;
     height: auto;
     width: 350px;
     top: 0;
     left: -50px;
 }
 
 .shape img {
     width: 100%;
 }
 
 .about-img img {
     width: 90%;
     border-radius: 38% 67% 45% 42% / 37% 62% 38% 63%;
     box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
 }
 
 .about-content {
     background: #fff;
     box-shadow: 0px 5px 10px 0px #EBEBEB;
     padding: 20px;
     border-radius: 25px;
 }
 
 .about-content p {
     margin-bottom: 0;
 }
 /*-------------------------
         Skills
-------------------------*/
 
 .skill-box {
     padding: 30px 23px 0 20px;
     margin-top: 30px;
 }
 
 .skill-box .skillbar {
     position: relative;
     display: block;
     width: 100%;
     height: 10px;
     transition: 0.1s linear;
     background-color: #dfdfdf83;
     border-radius: 10px;
 }
 
 .skill-box .skillbar:not(:last-child) {
     margin-bottom: 50px;
 }
 
 .skill-box .skillbar-title {
     position: absolute;
     top: -28px;
     left: 0;
     font-weight: 500;
     font-size: 14px;
 }
 
 .skill-box .skillbar-title span {
     margin-left: 18px;
 }
 
 .skill-box .fill-skillbar {
     height: 10px;
     width: 0;
     float: left;
     border-radius: 10px;
 }
 
 .skill-box .skill-bar-percent {
     position: absolute;
     font-weight: 500;
     bottom: 16px;
     right: 0;
 }
 
 .about .skill-bar-percent::after {
     content: '%';
 }
 /*-------------------------
         Count-Up
-------------------------*/
 
 .count-up {
     position: relative;
 }
 
 .counted-boxes {
     background: #fff;
     box-shadow: 0px 5px 10px 0px #EBEBEB;
     padding: 20px;
     border-radius: 25px;
 }
 
 .counted-box {
     color: #444;
     text-align: center;
 }
 
 .counted-box i {
     font-size: 32px;
     display: block;
 }
 
 .counted-box h6 {
     position: relative;
 }
 
 .count-number {
     display: block;
     margin-top: 10px;
     font-size: 22px;
 }
 
 .shape-01 {
     position: absolute;
     z-index: -1;
     height: auto;
     width: 350px;
     top: -50%;
     right: 0;
 }
 
 .shape-01 img {
     width: 100%;
 }
 /*-------------------------
       services
-------------------------*/
 
 .gtco-testimonials {
     position: relative;
 }
 /* @media (max-width: 767px) {
     .gtco-testimonials {
         margin-top: 20px;
     }
 } */
 
 .gtco-testimonials h2 {
     font-size: 30px;
     text-align: center;
     margin-bottom: 50px;
     color: #fff;
     text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
     letter-spacing: 2px;
     background-color: #444;
     padding: 10px 5px;
 }
 
 .gtco-testimonials .owl-stage-outer {
     padding: 30px 0;
 }
 
 .gtco-testimonials .owl-nav {
     display: none;
 }
 
 .gtco-testimonials .owl-dots {
     text-align: center;
 }
 
 .gtco-testimonials .owl-dots span {
     position: relative;
     height: 10px;
     width: 10px;
     border-radius: 50%;
     display: block;
     background: #fff;
     border: 2px solid #444;
     margin: 0 5px;
 }
 
 .gtco-testimonials .owl-dots .active {
     box-shadow: none;
 }
 
 .gtco-testimonials .owl-dots .active span {
     background: #444;
     box-shadow: none;
     height: 12px;
     width: 12px;
     margin-bottom: -1px;
 }
 
 .card {
     position: relative;
 }
 
 .card-body {
     padding: 15px 0 0 10px;
 }
 
 .gtco-testimonials .card {
     background: #fff;
     box-shadow: 0px 5px 10px 0px #EBEBEB;
     margin: 0 20px;
     padding: 25px;
     border-radius: 25px;
     border: 0;
 }
 
 .gtco-testimonials .card .card-img-top {
     width: 60px;
     height: 60px;
     float: left;
     margin-left: 10px;
 }
 
 .gtco-testimonials .card h5 {
     line-height: 1.3;
     position: absolute;
     left: 115px;
     top: 46px;
 }
 
 .gtco-testimonials .card h5 span {
     font-size: 18px;
     color: #444;
 }
 
 .gtco-testimonials .card p {
     font-size: 18px;
     color: #444;
     /* padding-bottom: 15px; */
     clear: both;
     /* margin-top: 50px; */
     margin-bottom: 0;
 }
 
 .gtco-testimonials .active {
     opacity: 0.5;
     transition: all 0.3s;
 }
 
 .gtco-testimonials .center {
     opacity: 1;
 }
 
 .gtco-testimonials .center h5 {
     font-size: 24px;
 }
 
 .gtco-testimonials .center h5 span {
     font-size: 20px;
 }
 
 .owl-carousel .owl-nav button.owl-next,
 .owl-carousel .owl-nav button.owl-prev,
 .owl-carousel button.owl-dot {
     outline: 0;
 }
 /*-------------------------
        portfolio
-------------------------*/
 
 .portfolio {
     position: relative;
 }
 
 .portfolio .title h5 {
     margin-bottom: 25px !important;
 }
 /* .col-md-4.portfolio-box.Fitness,.training,.jumping #portfolio-filter{
     right: 0;

 } */
 .portfolio-box img {
     width: 100%;
     border-radius: 25px;
 }
 
 .portfolio-overlay-content {
     position: absolute;
     width: 80%;
     bottom: 10%;
     opacity: 0;
     left: 30px;
     z-index: 2;
     color: #444;
 }
 
 #portfolio-filter {
     margin-bottom: 20px;
 }
 
 .portfolio-item {
     position: relative;
     width: 100%;
     margin-bottom: 25px;
 }
 
 .portfolio-item:before {
     content: '';
     display: block;
     position: absolute;
     height: 0%;
     width: 100%;
     bottom: 0;
     border-radius: 25px;
     transition: height 0.5s ease-out;
 }
 
 .portfolio-item:hover:before {
     height: 100%;
 }
 
 .portfolio-overlay-content {
     position: absolute;
     width: 100%;
     bottom: 0;
     transform: translateY(-50%);
     text-align: center;
     opacity: 0;
     left: 0;
     z-index: 2;
     color: #fff;
 }
 
 .portfolio-item::after {
     position: absolute;
     content: "";
     border-radius: 0;
     z-index: 1;
     top: 10px;
     left: 10px;
     bottom: 10px;
     right: 10px;
     transform: scaleY(0);
     transform-origin: bottom;
     transition: all 0.5s ease;
 }
 
 .portfolio-item:hover::after {
     transform: scale(1);
     opacity: 1;
 }
 
 .portfolio-item:hover .portfolio-overlay-content {
     opacity: 1;
 }
 
 .portfolio-icon a {
     width: 40px;
     height: 40px;
     line-height: 40px;
     background-color: rgba(241, 248, 254, .4);
     display: inline-block;
     font-size: 19px;
     color: #fff;
     border-radius: 50%;
     text-align: center;
     transition: all 0.5s ease;
     margin: 10px;
 }
 
 .portfolio-icon a:hover {
     background-color: #444;
 }
 
 .portfolio-overlay-content h5 {
     margin-bottom: 12px;
 }
 
 .shape-02 {
     position: absolute;
     z-index: -1;
     height: auto;
     width: 350px;
     top: 100px;
     left: 0;
 }
 
 .shape-02 img {
     width: 100%;
 }

 /*-------------------------
       testimonial
 -------------------------*/
 
 .shape-03 {
     position: absolute;
     z-index: -1;
     height: auto;
     width: 350px;
     top: -50%;
     right: 0;
 }
 
 .shape-03 img {
     width: 100%;
 }
 
 .testimonials-wrapper .owl-dots {
     text-align: center;
 }
 
 .testimonials-wrapper .owl-dots span {
     position: relative;
     height: 10px;
     width: 10px;
     border-radius: 50%;
     display: block;
     background: #fff;
     border: 2px solid #444;
     margin: 0 5px;
 }
 
 .testimonials-wrapper .owl-dots .active {
     box-shadow: none;
 }
 
 .testimonials-wrapper .owl-dots .active span {
     background: #444;
     box-shadow: none;
     height: 12px;
     width: 12px;
     margin-bottom: -1px;
 }
 
 .owl-carousel .owl-nav button.owl-next,
 .owl-carousel .owl-nav button.owl-prev,
 .owl-carousel button.owl-dot {
     outline: 0;
 }
 
 .testimonials-wrapper .owl-nav {
     display: none;
 }
 
 .testimonials-wrapper {
     position: relative;
 }
 
 .inner-page-wrapper.testimonials-wrapper {
     background: 0 0;
 }
 
 .inner-page-wrapper.testimonials-wrapper .owl-dots {
     position: absolute;
     right: 0;
     top: -30px;
     z-index: 99;
 }
 
 .testimonials-wrapper .section-title h2 {
     margin: 0 0 10px;
     color: #fff;
 }
 
 .testimonials-wrapper .owl-dots {
     position: relative;
     right: 0;
     top: 0;
     z-index: 99;
 }
 
 .testimonials-wrapper .owl-carousel .owl-stage-outer {
     padding-top: 50px;
 }
 
 .testimonials-wrapper .owl-nav {
     display: none;
 }
 
 .testimonials-wrapper .owl-dot .active {
     display: inline-block;
     color: #444;
 }
 
 .testimonial-block {
     position: relative;
 }
 
 .testimonial-block .inner-box {
     position: relative;
     padding: 0 30px 30px;
     background: #fff;
     box-shadow: 0px 5px 10px 0px #EBEBEB;
     border-radius: 25px;
     margin-bottom: 25px;
     margin-left: 10px;
     margin-right: 10px;
 }
 
 .testimonial-block .inner-box .image {
     position: relative;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     overflow: hidden;
     margin-top: -50px;
     margin-bottom: 25px;
     display: inline-block;
 }
 
 .testimonial-block .inner-box .content {
     position: relative;
 }
 
 .testimonial-block .inner-box .content svg {
     position: absolute;
     right: 0;
     top: -15px;
     color: #444;
     width: 50px;
     height: 50px;
 }
 
 .testimonial-block .inner-box .content .author-info {
     position: relative;
     font-size: 20px;
     font-weight: 500;
     color: #444;
 }
 
 .testimonial-block .inner-box .content span {
     position: relative;
     color: #444;
     font-size: 14px;
 }
 
 .testimonial-block .inner-box .content .text {
     position: relative;
     margin-top: 20px;
     color: #444;
     font-size: 15px;
 }
 
 .testimonials-wrapper .owl-theme .owl-dots [class*="owl-"] {
     color: #444;
 }
 
 @media only screen and (max-width: 991px) {
     .testimonials-wrapper .owl-dots {
         display: block;
     }
 }
 /*-------------------------
         Blog
-------------------------*/
 
 .blog {
     position: relative;
 }
 
 .blog-img {
     overflow: hidden;
     border-radius: 25px 25px 0 0;
     -webkit-transform: scale(1);
     transform: scale(1);
     -webkit-transition: .5s ease-in-out;
     transition: .5s ease-in-out;
 }
 
 .blog-img img {
     width: 100%;
     transition: .5s ease-in-out;
 }
 
 .blog-box:hover img {
     -webkit-transform: scale(1.3);
     transform: scale(1.1);
     border-radius: 25px;
 }
 
 .blog-box {
     border-radius: 25px;
     box-shadow: 0px 5px 10px 0px #EBEBEB;
     background-color: #fff;
     margin-bottom: 24px;
 }
 
 .blog-box a {
     transition: 0.5s all ease;
     padding-bottom: 4px;
     color: #444 !important;
     margin-right: 4px;
 }
 .blog-content {
     padding: 15px;
 }
 
 .blog-content h5 {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     /* number of lines to show */
     line-clamp: 2;
     -webkit-box-orient: vertical;
     font-weight: 400;
 }
 
 .blog-like-boxes {
     float: right;
     overflow: hidden;
 }
 
 .blog-like-box {
     float: left;
     margin-left: 10px;
     padding-bottom: 10px;
     padding-top: 10px;
 }
 
 .blog-like span {
     margin-left: 5px;
 }
 
 .blog-btn {
     margin-top: 13px;
     font-weight: 600;
 }
 
 .blog-like i {
     box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     line-height: 30px;
     display: inline-block;
     text-align: center;
     margin-left: 10px;
     transition: all ease .3s;
 }
 
 .blog-like .up:hover {
     color: #009b00;
 }
 
 .blog-like .down:hover {
     color: red;
 }
 /*-------------------------
         Contact
-------------------------*/
 
 .contact {
     position: relative;
 }
 
 .shape-04 {
     position: absolute;
     z-index: -1;
     height: auto;
     width: 300px;
     top: -35px;
     left: 0;
 }
 
 .shape-04 img {
     width: 100%;
 }
 
 #my-map img {
     width: 100%;
     margin-bottom: 25px;
     border-radius: 25px;
 }
 
 .contact-box {
     margin-bottom: 50px;
 }
 
 .contact .pill-button {
     margin-top: 30px;
     margin-left: 0 !important;
 }
 
 .contact-content p {
     margin-bottom: 0;
     margin-top: 17px;
 }
 
 .contact-icon {
     float: left;
     font-size: 25px;
     margin-right: 15px;
     width: 50px;
     height: 50px;
     line-height: 50px;
     text-align: center;
     border-radius: 50%;
     background: #fff;
     box-shadow: 0px 5px 10px 0px #EBEBEB;
 }
 
 .contact-content p {
     -webkit-text-fill-color: #444;
 }
 
 .form-control {
     border: none;
     background-color: #fff;
     border-radius: 25px;
     height: 50px;
     margin-bottom: 18px;
     box-shadow: 0px 5px 10px 0px #EBEBEB;
     padding-left: 25px;
 }
 
 #message.toast {
     max-width: 500px;
     padding: 2px 0 1px;
     position: absolute;
     top: 26px;
     display: inline-block;
     left: 180px;
     color: #fff;
     width: 30%;
     text-align: center;
     border-radius: 32px;
 }
 
 .toast span {
     color: #fff;
 }
 
 .toast button span {
     position: relative;
     top: 0;
 }
 
 .toast button {
     background: transparent;
     border: none;
 }
 /*-------------------------
         Footer
-------------------------*/
 
 .footer {
     width: 100%;
     box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
 }
 
 .footer h6 {
     font-size: 15px;
 }
 
 .footer .list-inline-item:not(:last-child) {
     margin-right: 30px;
 }
 
 .copyright {
     float: left;
 }
 
 .footer-icon {
     float: right;
 }
 
 .tow-colored ul li {
     list-style: none;
     margin: 0 10px 0 10px;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     line-height: 56px;
     text-align: center;
     font-size: 25px;
     box-shadow: 0px 5px 10px 0px #EBEBEB;
     background-color: #fff;
     overflow: hidden;
     position: relative;
     transition: all .5s ease-in-out;
     z-index: 1;
     display: inline-block;
 }
 
 .tow-colored li a {
     color: #444;
 }
 
 .tow-colored ul li:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background-color: #171515;
     border-radius: 50%;
     transition: all .5s ease-in-out;
     transform: scale(0);
     z-index: -1;
 }
 
 .tow-colored ul li:hover:before {
     transform: scale(1);
     left: 0;
 }
 
 .tow-colored ul li:nth-child(1):before {
     background-color: #3b5998;
 }
 
 .tow-colored ul li:nth-child(2):before {
     background-color: #55acee;
 }
 
 .tow-colored ul li:nth-child(3):before {
     background-color: #171515;
 }
 
 .tow-colored ul li .bi {
     transition: all .5s ease-in-out;
 }
 
 .tow-colored ul li:hover .bi {
     color: #FFF;
 }
 
 .tow-colored ul li:after {
     content: '';
     width: 50%;
     height: 100%;
     background-color: rgba(255, 255, 255, .3);
     transition: all 1s ease-in-out;
     position: absolute;
     top: 0;
     right: -100%;
 }
 
 .tow-colored ul li:hover:after {
     right: 0;
 }

 /*-------------------------
      Return To Top
-------------------------*/
 
 .return-to-top {
     position: fixed;
     z-index: 999;
     right: 15px;
     bottom: -50px;
     padding: 0.25rem .5rem;
     transition: all 0.5s ease;
     color: #fff !important;
     background-color: #444;
     border-radius: 50%;
 }
 
 .return-to-top.show {
     bottom: 40px;
 }
 /*-------------------------
        Eror 404
-------------------------*/
 
 .error-content h1 {
     font-size: 72px;
     margin-bottom: 32px;
     font-weight: 500;
 }
 
 .error-content h2 {
     font-size: 48px;
     margin-bottom: 32px;
 }
 
 .error-content h3 {
     font-size: 20px;
     margin-bottom: 32px;
 }
 
 .search-404 .form-control-plaintext {
     color: #444;
 }
 
 .search-404 .form-control-plaintext {
     border: 1px solid #444;
     width: 100%;
     padding: 8px 20px;
     border-radius: 25px;
 }
 
 .error-content p {
     font-size: 20px;
     margin: 20px 0;
 }
 
 .search-404 form {
     position: relative;
 }
 
 .search-404 form button {
     color: #444;
     border: none;
     position: absolute;
     right: 6px;
     top: 4px;
 }
 
 .error .error-image img {
     width: 80%;
 }
 
 .error-area {
     margin-top: 100px;
 }
 
 .error-content .pill-button {
     margin-top: 0;
     margin-right: 0;
 }
 /*-------------------------
      portfolio-page
-------------------------*/
 
 .portfolio-page .shape-01 {
     top: -10%;
     right: 0;
 }
 /*-------------------------
      Blog-page
-------------------------*/
 
 .blog-page .shape-01 {
     top: -10%;
     right: 0;
 }
 
 .pagination-box .page-link {
     color: #444;
     border-color: #ebebeb;
 }
 
 .pagination-box .page-item.active .page-link,
 .pagination-box .page-link:hover {
     border-color: #71afbb !important;
     background-color: #71afbb !important;
 }
 /*-------------------------
      portfolio-single-page
-------------------------*/
 
 .title-header {
     font-size: 42px;
     font-weight: 600;
 }
 
 .portfolio-page-title .entry-meta ul {
     margin-bottom: 0;
 }
 
 .portfolio-title a {
     color: #444;
     margin-right: 15px;
     transition: all ease .3s;
 }
 
 .portfolio-title a:hover {
     color: #71afbb;
 }
 
 .entry-image img {
     width: 100%;
     border-radius: 25px;
 }
 
 .single-portfolio-image img {
     width: 100%;
     border-radius: 25px;
 }
 
 .aside-box {
     background: #fff;
     box-shadow: 0px 5px 10px 0px #EBEBEB;
     padding: 25px;
     border-radius: 25px;
     margin-bottom: 20px;
 }
 
 .aside-box p {
     margin-bottom: 32px;
 }
 
 .aside-item-portfolio a {
     color: #71afbb;
 }
 
 .aside-item-portfolio ul li:not(:last-child) {
     padding-bottom: 20px;
 }
 
 .aside-item-portfolio ul li:not(:last-child) {
     border-bottom: 1px solid #ebebeb;
     margin-bottom: 12px;
 }
 
 .single-portfolio .shape-02 {
     position: absolute;
     z-index: -1;
     height: auto;
     width: 300px;
     top: 165%;
     left: 0;
 }
 /*-------------------------
      blog-single-page
-------------------------*/
 .share-content a , .share-content a i{
     font-size: 14px;
 }
 .aside-title h6 {
     font-size: 25px;
     font-weight: 600;
 }
 
 .entry-meta a {
     color: #444;
     margin-right: 15px;
     transition: all ease .3s;
 }
 
 .entry-meta a:hover {
     color: #71afbb;
 }
 
 .blog-image-box img {
     width: 100%;
     border-radius: 25px;
     margin-bottom: 20px;
 }
 
 .entry-content .pill-button {
     margin-left: 0;
     margin-bottom: 40px;
 }
 
 .entry-content i {
     color: #444;
 }
 
 .blog-single .comments {
     padding-bottom: 64px;
 }
 
 .blog-single .comments-list li {
     margin-top: 32px;
 }
 
 .blog-single .comment-wrap {
     padding: 24px;
     position: relative;
     background-color: #f9f9f9;
     border-radius: 25px;
 }
 
 .blog-single .comment-content {
     position: relative;
     padding-left: 100px;
 }
 
 .blog-single .comment-author p a {
     font-size: 12px;
     color: #8d8e97;
 }
 
 .blog-single .image-comment {
     float: left;
     padding: 4px;
 }
 
 .blog-single .image-comment img {
     width: 65px;
     border-radius: 50%;
 }
 
 .blog-single .comment-reply-link {
     position: absolute;
     right: 0;
     top: 0;
     font-size: 24px;
     color: #444;
 }
 
 .contact-01 {
     margin-top: -40px;
 }
 
 .blog-single .blog-box {
     margin-bottom: 32px;
 }
 
 .blog-single .search-boxes .form-group {
     border-radius: 25px;
     display: flex;
     margin-bottom: 32px;
     box-shadow: 5px 5px 30px 0px rgba(231, 231, 231, 0.75);
 }
 
 .blog-single .search-boxes input {
     border: none;
     width: 100%;
     background-color: transparent;
     padding: 12px 22px;
     font-size: 14px;
     border-radius: 25px;
 }
 
 .blog-single .search-boxes input:focus {
     outline: none;
 }
 
 .blog-single .search-boxes button.btn {
     color: #444;
     border: none;
     position: absolute;
     right: 6px;
     top: 5px;
 }
 
 .blog-single .search-boxes button.btn:focus {
     box-shadow: none;
 }
 
 .sidebar-wrapper {
     margin-top: 18px;
 }
 
 .entry-meta li {
     padding: 5px;
 }
 
 .blog-single .aside-box {
     box-shadow: 5px 5px 30px 0px rgba(231, 231, 231, 0.75);
     padding: 24px;
     border-radius: 25px;
     margin-bottom: 32px;
 }
 
 .blog-single .aside-box ul {
     margin-bottom: 0;
 }
 
 .blog-single .aside-box a {
     text-decoration: none;
 }
 
 .aside-title {
     position: relative;
     overflow: hidden;
     margin-bottom: 24px;
 }
 
 .aside-title::after {
     content: "";
     display: inline-block;
     width: 100%;
     height: 1px;
     top: 45%;
     position: absolute;
     background-color: #444;
 }
 
 .aside-title h6 {
     display: inline-block;
     vertical-align: middle;
     margin-right: 15px;
     font-weight: 600;
 }
 
 .blog-single .aside-item ul li {
     display: flex;
     align-items: center;
     padding: 0 16px 12px 0;
     font-size: 14px;
 }
 
 .blog-single .aside-item ul li:not(:last-child) {
     border-bottom: 1px solid #ebebeb;
     margin-bottom: 12px;
 }
 
 .blog-single .aside-item ul li:last-child {
     padding-bottom: 0;
 }
 
 .blog-single .aside-item ul li span {
     margin-left: auto;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     line-height: 30px;
     font-size: 12px;
     text-align: center;
     color: #444;
 }
 
 .blog-single .aside-item ul li a {
     color: #444;
     transition: all ease .3s;
 }
 
 .blog-single .post-list {
     display: flex;
 }
 
 .blog-single .post-list:not(:last-child) {
     margin-bottom: 24px;
     padding-bottom: 16px;
 }
 
 .blog-single .post-image {
     width: 125px;
     margin-right: 16px;
     border-radius: 50% !important;
 }
 
 .blog-single .post-image img {
     width: 90px;
     height: 90px;
     line-height: 90px;
     border-radius: 25px;
 }
 
 .blog-single .post-title {
     font-size: 15px;
 }
 
 .blog-single .post-title a {
     color: #444;
     transition: all ease .3s;
 }
 
 .blog-single .blog-date {
     font-size: 13px;
     color: #444;
 }
 
 .blog-single .image-gallery {
     text-align: center;
 }
 
 .blog-single .image-gallery li {
     width: 28%;
     margin-bottom: 14px;
 }
 
 .blog-single .image-gallery img {
     width: 100%;
     border-radius: 50%;
 }
 
 .blog-single .tag-box {
     box-shadow: 5px 5px 30px 0px rgba(231, 231, 231, 0.75);
 }
 
 .blog-single .tagcloud a {
     padding: 8px 16px;
     color: #444;
     display: inline-block;
     margin-right: 4px;
     margin-bottom: 12px;
     box-shadow: 5px 5px 30px 0px rgba(231, 231, 231, 0.75);
     border-radius: 25px;
     text-decoration: none;
     transition: all ease .3s;
 }
 
 .follow-instagram {
     position: relative;
 }
 
 .follow-instagram img {
     width: 100%;
     border-radius: 25px;
     padding: 7px;
 }
 
 .follow-instagram-text a {
     color: #fff;
 }
 
 .follow-instagram-text a {
     font-size: 15px;
     position: absolute;
     border: none;
     padding: 12px 24px;
     left: calc(50% - 130px);
     display: inline-block;
     bottom: 38%;
     transition: all ease 0.5s;
     background-color: #fff;
 }
 
 .follow-instagram.mt-3 {
     width: 100%;
     border-radius: 25px;
 }
 
 .blog-single .shape-02 {
     position: absolute;
     z-index: -1;
     height: auto;
     width: 300px;
     top: 225%;
     left: 0;
 }
 
 .blog-single .shape-01 {
     position: absolute;
     z-index: -1;
     height: auto;
     width: 350px;
     top: 8%;
     right: 0;
 }
 /*-------------------------
       Theme Skin
-------------------------*/
 
 .color-switcher .color-pallet {
     background-color: #fff;
     color: #444 !important;
     box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
     top: 80px;
     z-index: 1000;
     position: fixed;
     transition: all 0.3s ease;
     right: -192px;
     width: 189px;
     opacity: 1;
     visibility: visible;
 }
 
 .color-switcher .color-pallet.show {
     right: 0;
 }
 
 .color-switcher .pallet-button {
     position: absolute;
     top: 16px;
     right: 100%;
     background-color: #444;
     z-index: 1000;
     transition: all 0.3s ease;
     display: block;
     width: 40px;
     border-radius: 25px 0 0 25px;
 }
 
 .color-switcher .pallet-button a {
     width: 40px;
     height: 40px;
     line-height: 40px;
     color: #fff;
     display: block;
     text-align: center;
 }
 
 .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: 25px;
     width: 25px;
     margin: 11px;
     border-radius: 50%;
 }
 
 .color-switcher ul.pattern .color1 {
     background: #71afbb;
 }
 
 .color-switcher ul.pattern .color2 {
     background: #FDA242;
 }
 
 .color-switcher ul.pattern .color3 {
     background: #9A9483;
 }
 
 .color-switcher ul.pattern .color4 {
     background: #74DB8C;
 }
 
 .color-switcher ul.pattern .color5 {
     background: #E99497;
 }
 
 .color-switcher ul.pattern .color6 {
     background: #CFB784;
 }
 
 .color-switcher ul.pattern .color7 {
     background: #D665FF;
 }
 
 .color-switcher ul.pattern .color8 {
     background: #FF009B;
 }
 
 .color-switcher ul.pattern .color9 {
     background: #F55C47;
 }
 
 .color-switcher ul.pattern .color10 {
     background: #FFE699;
 }
 
 .color-switcher ul.pattern .color11 {
     background: #47597E;
 }
 
 .color-switcher ul.pattern .color12 {
     background: #444;
 }
 
 .color-switcher ul.pattern-2 li a {
     height: 35px;
     width: 35px;
     margin: 14px;
 }
 
 .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: #010101;
     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;
 }
 
 .theme-skin-title {
     margin: 0;
     padding: 15px 0 0;
     border-radius: 25px 25px 0 0;
 }
 
 .theme-skin,
 .theme-direction-style {
     margin: 0;
     padding: 8px 0 16px;
 }
 
 .theme-skin li,
 .theme-direction-style li {
     margin: 0 !important;
 }
 
 .theme-skin li:last-child,
 .theme-direction-style li:last-child {
     border-radius: 25px;
     padding: 1px;
 }
 
 .theme-skin li:last-child a:hover,
 .theme-skin li:last-child a.active,
 .theme-direction-style li:last-child a:hover,
 .theme-direction-style li:last-child a.active {
     border: none;
 }
 
 .theme-skin li a,
 .theme-direction-style li a {
     display: block;
     padding: 8px;
     border-radius: 0.75rem;
     color: #222;
     transition: all 0.5s ease;
     font-size: 14px;
     background-color: #ebebeb;
 }
 
 .theme-skin li a.flat-skin,
 .theme-direction-style li a.flat-skin {
     margin-right: 3px;
 }
 
 .blue-light .hero-box {
     color: #444 !important;
 }
 /*-------------------------
       Media
-------------------------*/
 
 @media (max-width:1199px) {
     .about-img img {
         margin-top: 25px;
     }
     .blog-like-box {
         margin-left: 0;
     }
     .blog-content p {
         margin-bottom: 20px;
     }
     .blog-like i {
         margin-right: 5px;
         margin-left: 5px;
     }
     .blog-box {
         margin-bottom: 0;
     }
     .blog-box a {
         margin-right: 0;
     }
 }
 
 @media (max-width:991px) {
     .hero {
         margin-bottom: -80px;
     }
     .hero-center {
         position: relative;
         top: 55%;
         transform: translateY(-50%);
     }
     .hero-content p {
         max-width: 450px;
     }
     .hero-img img {
         position: absolute;
         width: 50%;
         left: 50%;
         bottom: 0;
     }
     .about-content {
         margin-top: 33px;
     }
     .counted-box {
         margin-bottom: 15px;
         margin-top: 15px;
     }
     .blog-box {
         margin-bottom: 25px;
     }
     .blog-content p {
         margin-bottom: 20px;
     }
     .blog-like i {
         margin-right: 5px;
         margin-left: 5px;
     }
     .blog [class^="col-"]:last-child .blog-box {
         margin-bottom: 0;
     }
     .contact-icon {
         margin-right: 7px;
     }
     .contact-content p {
         margin-top: 14px;
     }
     #message.toast {
         top: 85px;
         left: 0px;
         margin-left: 0;
         width: 40%;
     }
     .copyright {
         float: initial !important;
         text-align: center;
         margin-bottom: 12px;
     }
     .footer-icon {
         float: initial !important;
         text-align: center;
     }
     .follow-instagram-text a {
         bottom: 43%;
     }
     .error-area {
         margin-top: 0;
     }
     .error-content {
         text-align: center;
     }
     .error .error-image img {
         margin-left: 67px;
     }
     .sidebar-wrapper {
         margin-top: 50px;
     }
 }
 
 @media (max-width:767px) {
     .blog-like i {
         margin-right: 4px;
         margin-left: 4px;
     }
     .hero-content h2 {
         font-size: 55px;
     }
     .hero-img img {
         right: 0;
         top: 50px;
     }
     .hero-content p {
         max-width: 360px;
     }
     .follow-instagram-text a {
         bottom: 41%;
     }
     .error .error-image img {
         margin-left: 50px;
     }
 }
 
 @media (max-width:575px) {
     .hero-img img {
         display: none;
     }
     .hero {
         margin-bottom: -100px;
         margin-top: -80px;
     }
     .follow-instagram-text a {
         bottom: 42%;
     }
     .testimonial-block .inner-box .content svg {
         top: -50px;
     }
     #message.toast {
         width: 55%;
     }
     .error .error-image img {
         margin-left: 37px;
     }
 }
 
 @media (max-width:442px) {
     .testimonial .owl-carousel .owl-dots {
         bottom: 45px;
     }
 }
 
 @media (max-width:360px) {
     .testimonial .shape-01 {
         width: 200px;
         top: 61%;
     }
     .hero-content {
         top: -190px;
         left: 25px;
     }
     .entry-content {
         text-align: justify;
     }
     .shape-01 {
         top: 82%;
         width: 57%;
     }
     .follow-instagram-text a {
         bottom: 37%;
     }
 }
 
 canvas.particles-js-canvas-el {
     position: absolute;
     top: 0;
     z-index: -1;
 }
 
 .particles-js-canvas-el {
     position: absolute;
     top: 0;
 }
 
 #particles-image-js {
     position: relative;
     overflow-x: hidden;
 }