/*===============================================
Template Name: TechPulse – IT Service & Solution HTML Template 
Author: https://templatemonster.com/authors/crelify agency
Description: TechPulse is a modern, clean, and fully responsive HTML5 template built for IT services, digital agencies, technology solutions, startups, and software companies.
Version: 1.0.0
Text Domain: techpulse 
Tags: it services, technology, software, startup, digital agency, business, company, corporate, web agency, saas, ai, solution, tech, consulting, multipurpose, responsive, bootstrap, html5, css3, modern, clean design, creative

================================================*/


/*===============================
    START TABLE OF CONTENTS
================================*/
/*
01.techpulse name Nav Menu Area Css
02.             banner section css
03.             about section css
04.             service section css
05.             service details section css
06.             section title Css
07.             portfolio section css
08.             portfolio details section css
09.             team section css
10.             team details section css
11.             our pricing section css
12.             testimonial section css
13.             our faq section css
14.             contact section css
15.             blog section css
16.             blog2 columns section css
17.             blog left sidebar section css
18.             blog right sidebar section css
19.             blog details section css
20.             footer section css
21.             breadcumb Area css
22.             Scroll Up Css 
23.             Loader Css

*/

/*===============================
    End TABLE OF CONTENTS
================================*/


/* <-- staer techpulse Name Nav Menu Section Css --> */

.techpulse_Name_nav_manu {
    transition: 0.5s;
    background: #1c1c25;
    box-shadow: 5px 0px 5px;
    position: absolute;
    z-index: 99;
    width: 100%;
}

.techpulse_Name_nav_manu:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/header-logo/header-shape.webp);
    background-repeat: no-repeat;
    background-position: center left;
}

#sticky-header.techpulse_Name_nav_manu.style-2.techpulse_Name_nav_manu {
    top: -22px;
    left: -56px;
}
  
.techpulse_Name_nav_manu.style-2.techpulse_Name_nav_manu {
    margin: 21px 30px 0 56px;
    transition: 0.5s;
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    background: #1c1c25 !important;
    box-shadow: 5px 0px 5px;
    z-index: 500;
}

.sticky.techpulse_Name_nav_manu:before {
    display: none;
}

nav.techpulse_Name_menu {
    align-items: center !important;
    justify-content: center;
    display: flex;
}

.techpulse_Name_menu ul {
    list-style: none;
    display: inline-block;
    padding: 0;
}

.techpulse_Name_menu > ul > li {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.techpulse_Name_menu > ul > li > a {
    display: block;
    margin: 35px 18px;
    -webkit-transition: 0.5s;
    text-decoration: none;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
}

.techpulse_Name_menu > ul > li > a:hover {
    color: #6421ff;
}

nav.techpulse_Name_menu ul li a i {
    display: inline-block;
    font-size: 18px;
    padding-left: 2px;
}

nav.techpulse_Name_menu span {
    font-size: 13px;
    padding-left: 6px;
    font-family: FontAwesome;
    opacity: 0.5;
}
.logo {
    position: relative;
    z-index: 1;
}

.logo a img {
    width: 70%;
}

/* <-- End techpulse Name Nav Menu Section Css --> */

/* <-- Start Sub Menu Style Css --> */

.techpulse_Name_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 150%;
    width: 215px;
    text-align: left;
    background: #fff;
    margin: 0;
    z-index: 1;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: 0.5s;
    visibility: hidden;
    opacity: 0;
}

.techpulse_Name_menu ul li:hover > .sub-menu {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
    top: 100%;
    opacity: 1;
    z-index: 9999;
}

.techpulse_Name_menu ul .sub-menu li {
    position: relative;
}

.techpulse_Name_menu ul .sub-menu li a {
    display: block;
    padding: 12px 20px;
    margin: 0;
    letter-spacing: normal;
    font-size: 18px;
    font-weight: 500;
    -webkit-transition: 0.1s;
    visibility: inherit !important;
    color: #211e3b !important;
    text-decoration: none;
    transition: 0.5s;
    border-top: 1px dashed #6421ff;
    border-bottom: 1px dashed #6421ff;
    text-transform: capitalize;
    position: relative;
}

.techpulse_Name_menu ul .sub-menu li a:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background:#6421ff;
    transition: 0.5s;
    z-index: -1;
}

.techpulse_Name_menu ul .sub-menu li a:hover:before {
    height: 100%;
    top: 0;
}


.techpulse_Name_menu ul .sub-menu li:hover > a,
.techpulse_Name_menu ul .sub-menu .sub-menu li:hover > a,
.techpulse_Name_menu ul .sub-menu .sub-menu .sub-menu li:hover > a,
.techpulse_Name_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover > a {
    background:#6421ff;
    color: #fff !important;
}

.techpulse_Name_menu ul .sub-menu .sub-menu {
    left: 100%;
    top: 130%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden;
}

.techpulse_Name_menu ul .sub-menu li:hover > .sub-menu {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
    top: 0%;
}

.techpulse_Name_menu ul .sub-menu .sub-menu li {
    position: relative;
}

.techpulse_Name_menu ul .sub-menu .sub-menu .sub-menu {
    right: 100%;
    left: auto;
    top: 130%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden;
}

.techpulse_Name_menu ul .sub-menu .sub-menu li:hover > .sub-menu {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
    top: 0%;
}

.techpulse_Name_menu ul .sub-menu .sub-menu .sub-menu li {
    position: relative;
}

.techpulse_Name_menu ul .sub-menu .sub-menu .sub-menu li:hover > .sub-menu {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
    top: 0%;
}

.techpulse_Name_menu li a:hover:before {
    width: 100%;
}

.techpulse_Name_nav_manu.sticky .logo_img {
    display: none;
}

.main_sticky {
    display: none;
}

.techpulse_Name_nav_manu.sticky .main_sticky {
    display: inherit;
}

.sticky .techpulse_Name_menu li a {
    color: #fff;
}

.techpulse_Name_nav_manu.sticky a.dtbtn {
    color: #fff;
    background: #6421ff;
    border: 2px solid #6421ff;
}

.techpulse_Name_nav_manu.sticky a.dtbtn:hover {
    color: #6421ff;
}

.mobile-menu.mean-container {
    overflow: hidden;
}

/* <-- end Sub Menu Style Css --> */


/*  <-- Start Header Button Css --> */

.header-button {
    text-align: right;
}

.header-button a {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    background: #6421ff;
    padding: 12px 32px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
}

.header-button a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #ffff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 10px 0 10px 0;
}

.header-button a:hover:before {
    width: 100%;
}

.header-button a:hover {
   color: #6421ff;
}

/*  <-- end Header Button Css --> */


/*  <-- start banner section Css --> */

.slider-container {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform;
    transform: none !important;
}

.slide-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.slide h5 {
    font-weight: 500;
    font-size: 20px;
    margin: 0 0 26px;
    text-transform: uppercase;
    color: #ffffff;
    display: inline-block;
}

.slide h1 {
    color: #ffff;
    font-size: 60px;
    font-weight: 700;
    line-height: 65px;
    margin: 0 0 0;
}

.slide p {
    color: #ffffffcc;
    font-size: 17px;
    font-weight: 500;
    line-height: 28px;
    margin: 20px auto 27px;
    width: 42%;
}

.slide a {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    background: #6421ff;
    padding: 12px 32px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
}

.slide a i {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    padding-left: 5px;
    transition: 0.5s;
}

.slide a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #ffff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 10px 0 10px 0;
}

.slide a:hover:before {
    width: 100%;
}

.slide a:hover,
.slide a:hover i {
   color: #6421ff;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slider-nav {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.nav-dot.active {
    background: white;
    transform: scale(1.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.slider-arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 100px;
    z-index: 10;
}

.arrow {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
    font-size: 20px !important;
}

.arrow:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/*  <-- end banner section Css --> */



/*  <-- start all section title Css --> */
/* style one */
.section-title {
    margin-bottom: 45px;
}

.section-title h5 {
    background-color: #1273EB17;
    display: inline-block;
    padding: 10px 25px;
    color: #6421ff;
    border-radius: 10px 0 10px 0;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.section-title h1 {
    color: #0a0a0a;
    font-size: 40px;
    font-weight: 700;
    line-height: 50px;
    margin: 0 0 0;
}

/* style tow */
.section-title2 {
    margin-bottom: 45px;
}

.section-title2 h5 {
    background-color: #1273EB17;
    display: inline-block;
    padding: 10px 25px;
    color: #6421ff;
    border-radius: 10px 0 10px 0;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.section-title2 h1 {
    color: #0a0a0a;
    font-size: 40px;
    font-weight: 700;
    line-height: 50px;
    margin: 0 0 0;
}

.section-title2 p {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 15px 0 0;
    width: 100%;
}


/*  <-- end all section title Css --> */


/*  <-- start services section Css --> */
.services-section {
    padding: 120px 0 90px;
}

.services-box {
    transition: 0.5s;
    text-align: center;
    background: #ffffff;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 3px 7px 25px 0px rgba(0, 0, 0, 0.05);
    padding: 50px 30px 35px;
    position: relative;
}

.services-box:hover {
    transform: skewY(10deg);
}

.services-box .services-icon {
    display: inline-block;
    background-color: #FFFFFF;
    box-shadow: 0 28px 28px 0 rgba(108, 88, 250, 0.2);
    height: 110px;
    width: 110px;
    line-height: 100px;
    border-radius: 50%;
    transition: 0.5s;
}

.services-box:hover .services-icon {
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
} 

.services-box .services-icon img {
    height: 80px;
    width: 80px;
    margin: auto;
}

.services-box h3 {
    margin: 20px 0 10px;
}

.services-box h3 a {
    display: inline-block;
    color: #101010;
    font-size: 22px;
    font-weight: 600;
    transition: 0.5s;
}

.services-box:hover h3 a {
    color: #6421ff;
}

.services-box p {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 0 0 0;
    width: 100%;
}

/*  <-- end services section Css --> */



/*  <-- start about section Css --> */
.about-section {
    background: #F6F7F9;
    padding: 120px 0;
}

.icon-box {
    background: #ffff;
    border-radius: 0 30px 0 30px;
    padding: 30px 30px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    overflow: hidden;
}

.icon-box:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #6421ff1a;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 10px 0 10px 0;
}

.icon-box:hover:before {
    width: 100%;
    border-radius: 0 30px 0 30px;
}

.icon-box .box-icon {
    display: inline-block;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
    background: #ffff;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    transition: 0.5s;
}

.icon-box:hover .box-icon {
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
} 

.icon-box .box-icon img {
    width: 45px;
    height: 45px;
}

.icon-box h3 {
    color: #101010;
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    transition: o .5s;
    margin: 18px 0 12px;
}

.icon-box:hover h3 {
    color: #6421ff;
}

.icon-box p {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 0 0 0;
    width: 100%;
}

.about-btn a {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    background: #6421ff;
    padding: 12px 32px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
    margin-top: 10px;
}

.about-btn a i {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    padding-left: 5px;
    transition: 0.5s;
}

.about-btn a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #ffff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 10px 0 10px 0;
}

.about-btn a:hover:before {
    width: 100%;
}

.about-btn a:hover,
.about-btn a:hover i {
   color: #6421ff;
}

.about-thumb {
    position: relative;
    z-index: 1;
    margin-left: 40px;
    overflow: hidden;
    border-radius: 30px;
}

.about-thumb img {
    width: 100%;
    border-radius: 30px;
    -webkit-transition: all 700ms ease;
    transition: all 700ms ease;
}

.about-thumb img:first-child {
  position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    -webkit-transform: translateX(50%) scaleX(2);
    transform: translateX(50%) scaleX(2);
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.about-thumb img:hover:first-child {
    -webkit-transform: translateX(0) scaleX(1);
    transform: translateX(0) scaleX(1);
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
}

.about-shape {
    position: absolute;
    z-index: -1;
    bottom: -20px;
    right: -20px;
    animation: 8.0s ease 0s infinite normal none running bounce;
}


@keyframes bounce {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(35px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes bd-bounce {
    0%, 100%, 20%, 50%, 80% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0) translateX(0%);
    }
    40% {
      -webkit-transform: translateY(-8px);
      -ms-transform: translateY(-8px);
      transform: translateY(-8px) translateX(0%);
    }
    60% {
      -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
      transform: translateY(-4px) translateX(0%);
    }
}

/*  <-- end about section Css --> */


/*  <-- start why choose us section Css --> */
.why-choose-us-section {
    padding: 120px 0 115px;
}

.why-choose-thumb {
    position: relative;
    overflow: hidden;
}

.why-choose-thumb img {
    width: 100%;
    -webkit-transition: all 700ms ease;
    transition: all 700ms ease;
}

.why-choose-thumb img:first-child {
  position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    -webkit-transform: translateX(50%) scaleX(2);
    transform: translateX(50%) scaleX(2);
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.why-choose-thumb img:hover:first-child {
    -webkit-transform: translateX(0) scaleX(1);
    transform: translateX(0) scaleX(1);
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
}

/* choose us box */
.why-choose-us-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

.why-choose-us-box .choose-us-icon {
    display: inline-block;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
    background: #ffff;
    height: 60px;
    width: 80px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
    transition: 0.5s;
}

.why-choose-us-box:hover .choose-us-icon {
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
} 

.why-choose-us-box .choose-us-icon img {
    width: 35px;
    height: 35px;
}

.why-choose-us-box h3 {
    color: #101010;
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    transition: o .5s;
    margin: 0 0 0;
}

.why-choose-us-box:hover h3  {
    color: #6421ff;
}


.why-choose-us-box p {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 10px 0 0;
    width: 90%;
}

/* counter */
.counter-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.counter-box:hover .counter-icon {
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
}

.counter-box .counter-title h3 {
    display: inline-block;
    color: #6421ff;
    font-weight: 600;
    font-size: 50px;
    line-height: 50px;
    margin: 0;
    transition: 0.5s;
}

.counter-box .counter-title  span {
   display: inline-block;
    color: #6421ff;
    font-weight: 600;
    font-size: 50px;
    line-height: 50px;
    transition: 0.5s;
    margin: 0;
}

.counter-box p {
    color: #444;
    font-size: 20px;
    font-weight: 500;
    margin: 5px 0 0;
}


/*  <-- end why choose us section Css --> */


/*  <-- start portfolio section Css --> */
.portfolio-section {
    background: #F6F7F9;
    padding: 120px 0 100px;
}

.case_study_menu ul li.current_menu_item {
    background: #1c1c25;
}

.case_study_menu ul {
    list-style: none;
}

.case_study_menu ul li {
    display: inline-block;
    cursor: pointer;
    background: #6421ff;
    color: #ffff;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 30px;
    border-radius: 10px 0 10px 0;
    margin: 0 5px 0;
    transition: 0.5s;
}

.case_study_menu {
    text-align: center;
    margin-bottom: 40px;
}

.case-study-single-box {
    margin-bottom: 20px;
    overflow: hidden;
}

.case-study-single-box .case-study-thumb {
    position: relative;
    z-index: 1;
    transition: 0.5s;
    border-radius: 10px;
}

.case-study-single-box .case-study-thumb img {
    width: 100%;
    border-radius: 10px;
}

.case-study-single-box .case-study-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0%;
    height: 100%;
    transition: 0.5s;
    background: #6421ff;
    border-radius: 10px;
    margin: auto;
}

.case-study-single-box:hover .case-study-thumb:before {
    width: 100%;
}

.case-study-single-box .case-study-content {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
}

.case-study-single-box:hover .case-study-content {
    opacity: 1;
    visibility: visible;
    top: 148px;
}

.case-study-single-box h3 {
    margin: 0 0 0;
}

.case-study-single-box h3 a {
    display: inline-block;
    color: #ffff;
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    transition: 0.5s;
    width: 89%;
}

.case-study-single-box p {
    color: #ffffffcc;
    font-size: 16px;
    font-weight: 500;
    margin: 5px 0 0;
    transition: 0.5s;
}

.portfolio-section.up {
    padding: 120px 0 0;
}

/*  <-- end portfolio section Css --> */



/*  <-- start team section Css --> */
.team-section {
    padding: 120px 0 90px;
}

.team-box {
    background: #F6F7F9;
    margin-bottom: 30px;
}

.team-box .team-thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 10px;
}

.team-box .team-thumb img {
    width: 100%;
    border-radius: 10px;
    -webkit-transition: all 700ms ease;
    transition: all 700ms ease;
}

.team-box .team-thumb:before {
    position: absolute;
    content: "";
    z-index: 99;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #6421ff;
    border-radius: 10px 0 0 10px;
    transition: 0.5s;
}

.team-box:hover .team-thumb:before {
    width: 70%;
}

.team-box .team-thumb img:first-child {
  position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    -webkit-transform: translateX(50%) scaleX(2);
    transform: translateX(50%) scaleX(2);
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.team-box:hover .team-thumb img:first-child {
    -webkit-transform: translateX(0) scaleX(1);
    transform: translateX(0) scaleX(1);
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
}

.team-box .team-social-icon {
    position: absolute;
     z-index: 99;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: inline-table;
    background: #6421ff;
    padding: 20px 12px;
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}

.team-box .team-social-icon ul {
    list-style: none;
}

.team-box .team-social-icon ul li {
    margin: 8px 0;
}

.team-box .team-social-icon ul li a {
    display: inline-block;
    height: 35px;
    width: 35px;
    line-height: 35px;
    background: #ffff;
    text-align: center;
    border-radius: 30px;
    font-size: 16px;
    transition: 0.5s;
    color: #6421ff;
}

.team-box .team-social-icon ul li a:hover {
    background: #6421ff;
    color: #ffff;
}

.team-box  .team-icon-box {
    position: absolute;
    left: 0;
    bottom: 30px;
    opacity: 0;
    transition: 0.5s;
    z-index: 99;
}

.team-box:hover  .team-icon-box {
    left: 30px;
    opacity: 1;
}

.team-box  .team-icon-box p {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin: 10px 0;
    transition: 0.5s;
}

.team-box  .team-icon-box p i {
    color: #fff;
    font-size: 18px;
    transition: 0.5s;
    padding-right: 5px;
}


.team-box .team-content {
    text-align: center;
    padding: 30px 10px 25px;
}

.team-box .team-content h3 {
    margin: 0 0 0;
}

.team-box .team-content h3 a {
    display: inline-block;
    color: #101010;
    font-size: 22px;
    font-weight: 600;
    transition: 0.5s;
}
    
.team-box .team-content h3 a:hover {
    color: #6421ff;
}

.team-box .team-content p {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    margin: 5px 0 0;
}


/*  <-- end team section Css --> */


/*  <-- start testimonial section Css --> */
.testimonial-section {
    padding: 0 0 120px;
}

.testimonial-box {
    border-radius: 10px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.1));
    background-color: #F6F7F9;
    padding: 52px 0 80px;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: 39px 0 40px 0;
}

.testimonial-icon {
    position: absolute;
    top: -35px;
    left: 168px;
}

.testimonial-icon i {
    height: 72px;
    width: 72px;
    line-height: 72px;
    color: #6421ff;
    font-size: 25px;
    display: inline-block;
    background-color: #FFFFFF;
    box-shadow: 0 28px 28px 0 rgba(108, 88, 250, 0.2);
    border-radius: 50%;
    transition: 0.5s;
}

.testimonial-content h4 {
    font-size: 22px;
    color: #232323;
    font-weight: 500;
    margin: 0 0 0;
}

.testimonial-box:hover .testimonial-content h4 {
    color: #6421ff;
}

.testimonial-content h5 {
    font-size: 18px;
    color: #232323;
    font-weight: 500;
    margin: 8px 0 0;
}

.testimonial-content p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 500;
    text-align: center;
    width: 92%;
    margin: 20px auto 0;
}

.testimonial-thumb img {
    margin: 26px 167px -118px;
}

.testimonial-section.up {
    padding: 120px 0;
}

/* owl nev */
.owl-nav {
    position: absolute;
    right: 0;
    top: -35%;
}

.owl-nav .owl-prev, .owl-nav .owl-next {
    display: inline-block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50px;
    border: 1px solid #6421ff;
    color: #6421ff;
    background: transparent;
    font-size: 30px;
    transition: 0.5s;
    margin: 0 5px;
}

.owl-nav .owl-prev:hover, .owl-nav .owl-next:hover {
    background: #6421ff;
    color: #fff;
}

/*  <-- end testimonial section Css --> */


/*  <-- start working process section Css --> */

.working-section {
    background: #F6F7F9;
    padding: 120px 0 90px;
}

.working-box {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 20px;
}

.working-box.up {
    background: #fff;
    border-radius: 10px;
    padding: 20px 20px;
}

.working-box .working-icon {
    transition: 0.5s;
}

.working-box:hover .working-icon {
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
} 

.working-box h3 {
    color: #101010;
    font-size: 22px;
    font-weight: 600;
    margin: 18px 0 12px;
    transition: 0.5s;
}

.working-box:hover h3 {
    color: #6421ff;
}

.working-box p {
        color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 0 auto 0;
    width: 100%;
}

.working-section.up {
    padding: 120px 0 0;
}


/*  <-- end working process section Css --> */



/*  <-- start pricing section Css --> */
.pricing-section {
    padding: 120px 0 90px;
}

.pricing-tab-button {
    text-align: center;
    margin-bottom: 40px;
}

.pricing-tab-button ul li{
    display: inline-block;
}

.pricing-tab-button ul li button.active {
    border: none !important;
    font-size: 18px;
    font-weight: 500;
    color: #ffff;
    background-image: linear-gradient(268deg, #2b7cff, #8b3bff);
    width: 140px;
    height: 45px;
}

.pricing-tab-button ul li button {
    border: none;
    font-size: 18px;
    color: #1c1c1c;
    font-weight: 500;
    text-align: center;
    width: 140px;
    height: 45px;
    background: #F6F7F9;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

h2.price-yearly {
    display: none;
}

.tab-content {
    display: none;
    transition: .5s;
    -webkit-animation: move 0.4s ease-in;
}

.tab-content.active{
    display: block;
}

.pricing-single-items {
    box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.05);
    background: #F6F7F9;
    margin-bottom: 30px;
    padding: 30px 30px 25px;
    border-radius: 10px;
}

.pricing-single-items h3 {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    background: #6421ff;
    padding: 10px 25px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
    margin: 0 0 15px;
}

.pricing-single-items h2.price.price-monthly {
    font-size: 40px;
    font-weight: 600;
    color: #101010;
    margin: 0 0 0;
}

.pricing-single-items h2.price.price-monthly span {
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    color: #0f0f0fcc;
    margin: 0 0 0;
}

.pricing-single-items .pricing-desc p {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 15px 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #444444a6;
    width: 100%;
}

.pricing-single-items .pricing-list ul {
    list-style: none;
}

.pricing-single-items .pricing-list ul li {
    color: #444;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    margin: 0 0 12px;
}

.pricing-single-items .pricing-list ul li i {
    color: #444;
    font-size: 18px;
    padding-right: 6px;
}

.pricing-single-items .pricing-btn a {
    display: inline-block;
    background-color: #1273EB17;
    padding: 12px 25px;
    color: #6421ff;
    border-radius: 10px 0 10px 0;
    font-size: 18px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    overflow: hidden;
    margin-top: 20px;
}

.pricing-single-items .pricing-btn a i {
    display: inline-block;
    color: #6421ff;
    font-size: 18px;
    padding-left: 5px;
    transition: 0.5s;
}

/* pricing active */
.pricing-single-items.active {
    background: linear-gradient( 91deg, #2b7cff, #8b3bff);
}

.pricing-single-items.active h2.price.price-monthly {
    color: #ffffff;
}

.pricing-single-items.active h2.price.price-monthly span {
    color: #ffffff;
}

.pricing-single-items.active .pricing-desc p {
    color: #ffffff;
    border-bottom: 1px solid rgb(255 255 255 / 41%);
}

.pricing-single-items.active .pricing-list ul li {
    color: #ffffff;
}

.pricing-single-items.active .pricing-list ul li i {
    color: #ffffff;
}

.pricing-single-items.active .pricing-btn a {
    background-color: #ffffff;
}

/*  <-- end pricing section Css --> */



/*  <-- start footer section Css --> */

.contact-section {
    padding: 112px 0 120px;
    background: #F6F7F9;
    border-top: 1px solid #fff;
}

.contact-form-area {
    background: #ffffff1a;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    padding: 40px 30px 30px;
    margin-right: 40px;
}

.contact-input-box label {
    margin-bottom: 10px;
    font-weight: 500;
    color: #444;
    font-size: 20px;
}

.contact-input-box input, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #444;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 500;
    resize: none;
    background: transparent;
}

.contact-input-box input::placeholder {
    color: #444 !important;
}

.contact-input-box textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #444;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 500;
    resize: none;
    background: transparent;
    height: 200px;
}

.contact-input-box textarea::placeholder {
    color: #444 !important;
}

.contact-input-btn button {
    background: #6421ff;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    transition: 0.5s;
}

.contact-input-btn button:hover {
    background: #444;
}

.success-msg {
    display: none;
    text-align: center;
    color: #000000;
    font-weight: 500;
    margin-top: 10px;
    font-size: 16px;
}

.contact-icon-box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
}

.contact-icon-box .contact-icon i {
    display: inline-block;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50px;
    border: 1px solid #6421ff;
    color: #6421ff;
    font-size: 20px;
    transition: 0.5s;
}

.contact-icon-box:hover .contact-icon {
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
}

.contact-icon-box h3 {
    color: #101010;
    font-size: 25px;
    font-weight: 600;
    transition: 0.5s;
    margin: 0 0 0;
}

.contact-icon-box:hover h3 {
    color: #6421ff;
}

.contact-icon-box p {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    margin: 5px 0 0;
}

.contact-social-icon {
    margin-top: 20px;
}

.contact-social-icon ul {
    list-style: none;
}

.contact-social-icon ul li {
    display: inline-block;
    margin-right: 5px;
}

.contact-social-icon  ul li a {
    display: inline-block;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50px;
    border: 1px solid #6421ff;
    color: #6421ff;
    font-size: 20px;
    transition: 0.5s;
    position: relative;
    z-index: 1;
    transition: 0.5s;
}

.contact-social-icon  ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #6421ff;
    transform: scale(0);
    transition: 0.5s;
    border-radius: 30px;
    z-index: -1;
}

.contact-social-icon  ul li a:hover:before {
    transform: scale(1);
}

.contact-social-icon  ul li a:hover {
   color: #fff;
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
}


@keyframes movebounce {
    0% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
    50% {
      -webkit-transform: translateY(20px);
              transform: translateY(20px);
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
  }

.contact-section.up {
    padding: 120px 0 0;
}

/*  <-- end contact section Css --> */



/*  <-- start blog section Css --> */
.blog-section {
    padding: 120px 0 90px;
}

.blog-box {
    box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.05);
    background: #F6F7F9;
    margin-bottom: 30px;
    padding: 30px 30px;
    border-radius: 10px;
}

.blog-box .blog-thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 10px;
}

.blog-box .blog-thumb img {
    width: 100%;
    border-radius: 10px;
    -webkit-transition: all 700ms ease;
    transition: all 700ms ease;
}

.blog-box .blog-thumb img:first-child {
  position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    -webkit-transform: translateX(50%) scaleX(2);
    transform: translateX(50%) scaleX(2);
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}
.blog-box:hover .blog-thumb img:first-child {
    -webkit-transform: translateX(0) scaleX(1);
    transform: translateX(0) scaleX(1);
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
}

.blog-box .blog-meta {
    padding: 25px 0 10px;
}

.blog-meta ul {
    list-style: none;
}

.blog-meta ul li {
    display: inline-block;
    color: #444;
    font-size: 16px;
    font-weight: 500;
    margin-right: 15px;
}

.blog-meta ul li i {
    color: #6421ff;
    font-size: 16px;
    padding-right: 5px;
    display: inline-block;
}

.blog-box h3 {
    margin: 0 0 0;
}

.blog-box h3 a {
    display: inline-block;
    color: #101010;
    font-size: 25px;
    line-height: 32px;
    font-weight: 600;
    transition: 0.5s;
    width: 100%;
}

.blog-box:hover h3 a {
    color: #6421ff;
}

.blog-box p {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 10px 0 20px;
    width: 100%;
}

.blog-box a.btn {
    display: inline-block;
    background-color: #1273EB17;
    padding: 12px 25px;
    color: #6421ff;
    border-radius: 10px 0 10px 0;
    font-size: 18px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    overflow: hidden;
}

.blog-box a.btn i {
    display: inline-block;
     color: #6421ff;
     font-size: 18px;
     padding-left: 5px;
     transition: 0.5s;
}

.blog-box a.btn:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #6421ff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 10px 0 10px 0;
}

.blog-box a.btn:hover:before {
    width: 100%;
}

.blog-box a.btn:hover,
.blog-box a.btn:hover i {
    color: #fff;
}


/*  <-- end blog section Css --> */



/*  <-- start footer section Css --> */
.footer-section {
    padding: 120px 0 0px;
    background: #F6F7F9;
}

.footer-logo img {
    width: 70%;
}

.footer-widget-content .footer-desc p {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    width: 100%;
    margin: 25px 0 30px;
}

.footer-widget-content .footer-social-icon ul {
    list-style: none;
}

.footer-widget-content .footer-social-icon ul li {
    display: inline-block;
}

.footer-widget-content .footer-social-icon ul li a {
    display: inline-block;
    color: #444;
    font-size: 16px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    border: 1px solid #444;
    text-align: center;
    border-radius: 50px;
    transition: 0.5s;
    margin-right: 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.footer-widget-content .footer-social-icon ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #6421ff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 50px;
}

.footer-widget-content .footer-social-icon ul li a:hover:before {
    width: 50px;
}

.footer-widget-content .footer-social-icon ul li a:hover{
    border-color: #6421ff;
    color: #fff;
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
}

.footer-widget-content .footer-title h3 {
    color: #6421ff;
    font-weight: 600;
    font-size: 30px;
    margin: 0 0 25px;
} 

.footer-widget-content .footer-menu ul {
    list-style: none;
}

.footer-widget-content .footer-menu ul li {
    margin-bottom: 16px;
}

.footer-widget-content .footer-menu ul li a {
    color: #101010;
    display: inline-block;
    font-weight: 500;
    font-size: 18px;
    transition: 0.5s;
}

.footer-widget-content .footer-menu ul li a:hover {
    color: #6421ff;
}

.footer-widget-content .subscribe-area p {
    color: #101010;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    width: 100%;
    margin: 0px 0 30px;
}

.subscribe-area .subscribe-form input {
    display: inline-block;
    width: 100%;
    height: 56px;
    padding-left: 30px;
    background: transparent;
    border: 1px solid #1010104d;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
}

.subscribe-area .subscribe-form input::placeholder {
    color: #444;
}

.subscribe-area .subscribe-form button {
    background: linear-gradient(268deg, #2b7cff, #8b3bff);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    transition: 0.5s;
    margin-top: 20px;
}

@keyframes bd-bounce {
    0%, 100%, 20%, 50%, 80% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0) translateX(0%);
    }
    40% {
      -webkit-transform: translateY(-8px);
      -ms-transform: translateY(-8px);
      transform: translateY(-8px) translateX(0%);
    }
    60% {
      -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
      transform: translateY(-4px) translateX(0%);
    }
}

/*  <-- start footer copyright section Css --> */

.copyright-text.text-center {
    border-top: 1px solid #10101033;
    padding: 30px 0;
    margin-top: 75px;
}

.copyright-text.text-center p {
    font-size: 16px;
    font-weight: 500;
    color: #101010;
    margin: 0 0 0;
}

.copyright-text.text-center p span {
    color: #6421ff;
}

/*  <-- end footer copyright section Css --> */


/*  <-- end footer section Css --> */


/*------ start prgoress section css ------------*/

.prgoress_indicator {
    position: fixed;
    right: 50px;
    bottom: 20px;
    height: 100px;
    width: 100px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(187, 247, 55, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

.prgoress_indicator::after {
    position: absolute;
    content: "\f062";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    color: #101010;
    left: 0;
    top: 0;
    height: 100px;
    width: 100px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
    position: absolute;
    content: "\f062";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    font-weight: 900;
    opacity: 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    left: 0;
    top: 0;
    height: 100px;
    width: 100px;
    cursor: pointer;
    display: block;
    z-index: 2;
    transition: all 200ms linear !important;
}

.prgoress_indicator:hover ::after {
  color: #2871ff;
}

.prgoress_indicator:hover ::before {
  opacity: 1;
}

.prgoress_indicator svg path {
  fill: none;
}

.prgoress_indicator svg.progress-circle path {
    stroke: #6421ff;
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear !important;
}

/*------ start prgoress section css ------------*/


/*=======================================================*/
/*------ start all inner page section css ------------*/
/*=======================================================*/

/*------ start breadcumb section css ------------*/
.breadcumb-section {
    padding: 250px 0 150px;
    background: url(../images/breadcumb-image/breadcumb-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.breadcumb-section .breadcumb-content {
    margin-top: -50px;
}

.breadcumb-content .breadcumb-title h3 {
    display: inline-block;
    font-size: 50px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 15px;
}

.breadcumb-content ul li {
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
}

.breadcumb-content ul li a {
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
}

.breadcumb-content ul li a span {
    display: inline-block;
    margin: 0 10px 0;
}

/*------ end breadcumb section css ------------*/



/*------ start service details section css ------------*/
.service-details-section {
    padding: 120px 0;
}

.service-details-thumb {
    position: relative;
    z-index: 1;
    margin-right: 30px;
    overflow: hidden;
    border-radius: 30px;
}

.service-details-thumb img {
    width: 100%;
    border-radius: 30px;
    -webkit-transition: all 700ms ease;
    transition: all 700ms ease;
}

.service-details-thumb img:first-child {
  position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    -webkit-transform: translateX(50%) scaleX(2);
    transform: translateX(50%) scaleX(2);
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.service-details-thumb img:hover:first-child {
    -webkit-transform: translateX(0) scaleX(1);
    transform: translateX(0) scaleX(1);
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
}

p.service-det {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 0 0 30px;
    width: 100%;
}

.service-details-btn a {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    background: #6421ff;
    padding: 12px 32px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
}

.service-details-btn a i {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    padding-left: 5px;
    transition: 0.5s;
}

.service-details-btn a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #0a0a0a;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 10px 0 10px 0;
}

.service-details-btn a:hover:before {
    width: 100%;
}

/*------ end service details section css ------------*/



/*------ start service Additional section css ------------*/
.Additional-section {
    padding: 115px 0 110px;
    background-image: url(../images/service-details-image/Additional-bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.Additional-service-box h3 {
    color: #ffffff;
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    transition: o .5s;
    margin: 0 0 25px;
}

.Additional-service-list ul {
    list-style: none;
}

.Additional-service-list ul li {
    color: #e0e0e0;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

.Additional-service-list ul li i {
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    background: #6421ff;
    border-radius: 30px;
    text-align: center;
    font-size: 16px;
    color: #ffff;
    margin-right: 10px;
    transition: 0.5s;
}

.Additional-service-list ul li:hover i {
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
} 


/*------ end service Additional section css ------------*/


/*------ start blog2-columns section css ------------*/

.Blog2-columns-section {
    padding: 120px 0 90px;
}

.blog-box.Blog2-columns h3 a {
    font-size: 32px;
    line-height: 40px;
    width: 100%;
}

/*------ end blog2-columns section css ------------*/


/*------ start blog left sidebar section css ------------*/
.blog-left-sideber-section {
    padding: 120px 0 90px;
}

.blog-sidebar-box {
    margin-bottom: 30px;
    box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.05);
    background: #F6F7F9;
    padding: 30px 30px 30px;
    border-radius: 10px;
}

.blog-sidebar-box h3 {
    color: #101010;
    font-size: 30px;
    font-weight: 600;
    transition: 0.5s;
    margin: 0 0 20px;
}

.sidebar-search-box {
    position: relative;
    z-index: 1;
}

.sidebar-search-box input {
    display: inline-block;
    height: 55px;
    width: 100%;
    padding: 0 30px 0;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    font-size: 16px;
    color: #000;
    font-weight: 500;
}

.sidebar-search-box button {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border: 1px solid #6421ff;
    background: #6421ff;
    border-radius: 5px;
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    z-index: 1;
    margin: auto;
}

.sidebar-search-box button i {
    display: inline-block;
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
}

ul.categories-list {
    list-style: none;
}

ul.categories-list li {
    margin-bottom: 12px;
}

ul.categories-list li a {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    transition: 0.5s;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #6e6e6e;
    padding-bottom: 12px;
}

ul.categories-list li a i {
    display: inline-block;
    color: #000;
    font-size: 16px;
    transition: 0.5s;
}

ul.categories-list li a:hover,
ul.categories-list li a:hover i {
    color: #6421ff;
    border-color: #6421ff;
}

.gallery-img {
    margin-bottom: 20px;
}

.gallery-img a img {
    width: 100%;
}

.blog-sidebar-tags a {
    display: inline-block;
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    background: #6421ff;
    padding: 8px 16px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
    margin: 0 0 10px 10px;
}

.blog-sidebar-tags a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #ffff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 10px 0 10px 0;
}

.blog-sidebar-tags a:hover:before {
    width: 100%;
}

.blog-sidebar-tags a:hover {
   color: #6421ff;
}

/*------ end blog left sidebar section css ------------*/


/*------ start blog details section css ------------*/
.Blog-details-section {
    padding: 120px 0 120px;
}

.blog-details-thumb img {
    width: 100%;
    border-radius: 30px;
}

.blog-details-box .content {
    padding: 25px 0 0;
}

.blog-details-box h3 {
    color: #101010;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    transition: 0.5s;
    margin: 5px 0 15px;
    width: 100%;
}

.blog-details-box h3:hover {
    color: #6421ff;
}

.blog-details-box p.desc1 {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 0 0 0;
    width: 93%;
}

.blog-details-box p.desc2 {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 30px 0 50px;
    width: 92%;
}

.blockquote-box {
    background: #F6F7F9;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.blockquote-box p {
    color: #101010;
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
    margin: 0 0 0;
    transition: 0.5s;
    width: 100%;
}

.blockquote-box h5 {
    color: #6421ff;
    font-size: 16px;
    font-weight: 500;
    margin: 12px 0 0;
    padding-left: 30px;
    position: relative;
}

.blockquote-box h5:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20px;
    height: 2px;
    background: #6421ff;
}

.single-blog-box {
    margin-bottom: 30px;
}

.single-blog-box .single-thumb img {
   width: 100%;
}

.single-blog-box h3 {
    color: #101010;
    font-size: 28px;
    line-height: 40px;
    font-weight: 600;
    transition: 0.5s;
    margin: 15px 0 20px;
    width: 100%;
}

.single-blog-box p {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 0 0 0;
    width: 100%;
}

.contact-form-area.up {
    margin-right: 0;
}

/*------ end blog details section css ------------*/



/*------ start team details section css ------------*/
.team-details-section {
    padding: 120px 0;
}

.row.team-box-bg {
    background: #ffffff;
    border-radius: 30px;
    box-shadow: 3px 7px 25px 0px rgba(0, 0, 0, 0.05);
    padding: 30px;
}

.team-details-thumb {
    margin-right: 30px;
}

.team-details-thumb img {
    width: 100%;
    border-radius: 30px;
}

.team-details-box h2 {
    color: #101010;
    font-size: 32px;
    font-weight: 600;
    transition: 0.5s;
    margin: 0 0 0;
}

.team-details-box h5 {
    color: #6421ff;
    font-size: 18px;
    font-weight: 500;
    margin: 5px 0 0;
}

.team-details-box .desc1 {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 30px 0 20px;
    width: 100%;
}

.team-details-box .desc2 {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 0 0 0;
    width: 100%;
}

.team-details-social-icon {
    margin: 15px 0 10px;
}

.team-details-social-icon ul {
    list-style: none;
}

.team-details-social-icon ul li {
    display: inline-block;
}

.team-details-social-icon ul li a {
    display: inline-block;
    color: #444;
    font-size: 16px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    border: 1px solid #444;
    text-align: center;
    border-radius: 50px;
    transition: 0.5s;
    margin-right: 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.team-details-social-icon ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #6421ff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 50px;
}

.team-details-social-icon ul li a:hover:before {
    width: 50px;
}

.team-details-social-icon ul li a:hover{
    border-color: #6421ff;
    color: #fff;
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
}

.team-details-icon-box {
    border: 1px solid #444;
    border-radius: 10px;
    margin-bottom: 30px;
    display: inline-block;
    text-align: center;
    padding: 20px 30px 15px;
}
.team-details-icon-box .team-details-icon i {
    display: inline-block;
    color: #444;
    font-size: 16px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    border: 1px solid #444;
    text-align: center;
    border-radius: 50px;
    transition: 0.5s;
}

.team-details-icon-box:hover .team-details-icon i {
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
}

.team-details-icon-box h4 {
    color: #101010;
    font-size: 22px;
    font-weight: 500;
    margin: 10px 0 5px;
    transition: 0.5s;
}

.team-details-icon-box p {
    color: #6421ff;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 0;
}

.team-biography {
    margin: 50px 0 0;
}

.team-biography h3 {
    color: #101010;
    font-size: 32px;
    font-weight: 600;
    transition: 0.5s;
    margin: 0 0 0;
}

.team-biography p {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 15px 0 0;
    width: 95%;
}


/*------ end team details section css ------------*/



/*------ start portfolio details section css ------------*/
.portfolio-details-section {
    padding: 120px 0;
}

.portfolio-thumb {
    margin-right: 30px;
}

.portfolio-thumb img {
    width: 100%;
    border-radius: 30px;
}

.portfolio-box h2 {
    color: #101010;
    font-size: 32px;
    font-weight: 600;
    transition: 0.5s;
    margin: 0 0 0;
}

.portfolio-box ul.information {
    list-style: none;
    margin: 10px 0 20px;
}

.portfolio-box ul.information li {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

.portfolio-box ul.information li span {
    display: inline-block;
    color: #000;
    font-size: 20px;
    font-weight: 600;
}

ul.portfolio-social-icon {
    list-style: none;
}

ul.portfolio-social-icon li {
    display: inline-block;
}

ul.portfolio-social-icon li a {
    display: inline-block;
    color: #444;
    font-size: 16px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    border: 1px solid #444;
    text-align: center;
    border-radius: 50px;
    transition: 0.5s;
    margin-right: 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

ul.portfolio-social-icon li a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #6421ff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 50px;
}

ul.portfolio-social-icon li a:hover:before {
    width: 50px;
}

ul.portfolio-social-icon li a:hover{
    border-color: #6421ff;
    color: #fff;
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
}

/*------ end portfolio details section css ------------*/


/*------ start accordion section css ------------*/

.accordion-section {
    padding: 70px 0 100px;
}

.tab_container {
    overflow: hidden;
    padding: 20px 0 0;
}

h2.accordion-title {
    font-size: 30px;
    padding: 0 0 37px;
}

.accordion li {
    list-style: none;
    padding: 2px 0px 15px;
}

.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 500;
    font-size: 22px;
    color: #101210!important;
    border-bottom: 1px solid rgba(19,17,37,0.15);
    padding: 27px 20px 20px 0px;
    z-index: 1;
}

.accordion li p {
    display: none;
    font-size: 16px;
    font-weight: 500;
    padding: 0px 0px 20px 0px;
    margin: 0;
    border-bottom: 1px solid rgba(19,17,37,0.15);
    width: 90%;
}

.accordion li a i {
    float: right;
    transform: rotate( 319deg);
    transition: .5s;
    font-size: 18px;
}

.accordion a.active:after {
  transform: rotate(0deg);
  -webkit-transition: all 0.2s ease-in-out;
  background: #6421ff;
  opacity: 1;
}

a.active i {
    transform: rotate(0deg) !important;
}

.accordion a.active {
    border-bottom: 0;
    padding: 25px 20px 15px 0px;
    color: #6421ff !important;
}




/*------ end accordion section css ------------*/



/*------ start loader section css ------------*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 999;
}

.loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    transition: all 1s 1s ease;
    border: 15px solid transparent;
    border-top-color: #000;
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    color: #ffffff;
}

.loader:before,
.loader:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    transform: rotateX(0deg);
    animation: 1s spin linear infinite;
}

.loader:after {
    color: #6421ff;
    transform: rotateY(0deg);
    animation-delay: .5s;
}

@keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
    }
  }

  @keyframes rotateccw {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

  @keyframes spin {
    0%,
    100% {
      box-shadow: .2em 0px 0 0px currentcolor;
    }
    12% {
      box-shadow: .2em .2em 0 0 currentcolor;
    }
    25% {
      box-shadow: 0 .2em 0 0px currentcolor;
    }
    37% {
      box-shadow: -.2em .2em 0 0 currentcolor;
    }
    50% {
      box-shadow: -.2em 0 0 0 currentcolor;
    }
    62% {
      box-shadow: -.2em -.2em 0 0 currentcolor;
    }
    75% {
      box-shadow: 0px -.2em 0 0 currentcolor;
    }
    87% {
      box-shadow: .2em -.2em 0 0 currentcolor;
    }
  }


.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #111;
    z-index: 2;
}

.loader-wrapper .loder-section.left-section {
    left: 0;
    transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
    right: 0;
    transition: 1s 1.4s ease;
}

.loaded .loder-section.left-section {
    left: -100%;
}

.loaded .loder-section.right-section {
    right: -100%;
}

.loaded .loader-wrapper {
    visibility: hidden;
}

.loaded .loader {
    top: -100%;
    opacity: 0;
}


/*------ end loader section css ------------*/



/*=======================================================*/
/*------ end all inner page section css ------------*/
/*=======================================================*/