/* =====================================
Template Name: Metalpeak
Author Name: Webby Crown
Author URI: 
Description: Metalpeak HTML5 Template.
Version:1.0
========================================*/



/*======================================
[ CSS Table of contents ]
|
|___ Home one style
| |
| |___ 01. Header CSS
| |___ 02. Hero section CSS
| |___ 03. partner section CSS
| |___ 04. training section CSS
| |___ 05. needs section CSS
| |___ 06. our-services section CSS
| |___ 07. team section CSS
| |___ 08. portfolio section CSS
| |___ 09. blog section CSS
| |___ 10. testimonial section CSS
| |___ 11. Newsletter section CSS
| |___ 12. footer section CSS
|
|___ Home two style
| |
| |___ 01. Header-two CSS
| |___ 02. Hero-two section CSS
| |___ 03. our-services-two section CSS
| |___ 04. training-two section CSS
| |___ 05. team-two section CSS
| |___ 06. pricing section CSS
| |___ 07. work section CSS
| |___ 08. blog-two section CSS
| |___ 09. testimonial-two section CSS
| |___ 10. newslatter-two section CSS
| |___ 11. footer-two section CSS
|
|___ Home three style
| |
| |___ 01. Header-three CSS
| |___ 02. Hero-three section CSS
| |___ 03. our-services-three section CSS
| |___ 04. training-three section CSS
| |___ 05. counter-three section CSS
| |___ 06. team-three section CSS
| |___ 07. choose section CSS
| |___ 08. plan-three section CSS
| |___ 08. blog-three section CSS
| |___ 09. testimonial-three section CSS
| |___ 11. footer-three section CSS
|
|___ About style
| |
| |___ 01. about-taskflow CSS
| |___ 02. about-services section CSS
| |___ 03. about-count section CSS
| |___ 04. team section CSS
| |___ 05. about-newslatter section CSS
| |___ 06. about-testimonial section CSS
| |___ 07. footer section CSS
|
|___ services-page-one style
| |
| |___ 01. services-page-one CSS
|
|___ services-page-two style
| |
| |___ 01. services-page-two CSS
|
|___ services-detail-one-1 style
| |
| |___ 01. services-detail-one-1 CSS
|
|___ services-detail-one-2 style
| |
| |___ 01. services-detail-one-2 CSS
|
|___ services-detail-two style
| |
| |___ 01. services-detail-two CSS
|
|___ services-detail-three style
| |
| |___ 01. services-detail-three CSS
|
|___ team style
| |
| |___ 01. services-detail-three CSS
|
|___ team-detail style
| |
| |___ 01. team-detail css
|
|___ portfolio-grid style
| |
| |___ 01. portfolio-grid css
|
|___ portfolio-masonary style
| |
| |___ 01. portfolio-masonary css
|
|___ portfolio-slider style
| |
| |___ 01. portfolio-slider css
|
|___ portfolio-detail style
| |
| |___ 01. portfolio-detail css
|
|___ blog-grid style
| |
| |___ 01. blog-grid css
|
|___ blog-list style
| |
| |___ 01. blog-list css
|
|___ blog-classic style
| |
| |___ 01. blog-classic css
|
|___ blog-detail style
| |
| |___ 01. blog-detail css
|
|___ blog-detail-two style
| |
| |___ 01. blog-detail-two css
|
|___ blog-detail-three style
| |
| |___ 01. blog-detail-three css
|
|___ plan-page style
| |
| |___ 01. plan-page css
|
|___ testimonial-page style
| |
| |___ 01. testimonial-page css
|
|___ contact-us-page style
| |
| |___ 01. contact-us-page css
|
|___ error style
| |
| |___ 01. error css
|
|___ faq style
| |
| |___ 01. faq css
|
|___ career-page style
| |
| |___ 01. career-page css
|
|___ presantation-page style
| |
| |___ 01. presantation-page css*/




/**************************************
    Home one style
    **************************************

    /* -------------loader----------- */

    .no-scroll {
        overflow: hidden;
    }

    .loader {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 999;
    }

    .loader .loader-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .loader .loader-text h3 {
        font-size: 30px;
        font-style: normal;
        font-weight: 300;
        line-height: 40px;
        letter-spacing: 9px;
    }

    .loader-two {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 999;
    }

    .loader-two .loader-image {
        max-width: 250px;
        width: 100%;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


/*=====================================
    01. Header style 1 CSS
    =======================================*/

    .header {
        position: fixed;
        width: 100%;
        z-index: 99;
        transition: .3s all ease;
    }

    .header.sticky {
        background-color: var(--color-dark);
        box-shadow: 0px 15px 10px -15px #11111124;
    }

    .header .wc-navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25px 0;
        position: relative;
    }

    .header.sticky .wc-navbar{
        padding: 10px 0;
    }

    .header .wc-navbar .mobile-menu {
        display: none;
    }

    .header .wc-navbar .logo a {
        max-width: 195px;
        width: 100%;
        display: block;
    }

    .header .wc-navbar .wc-navlist ul .wc-connect {
        display: none;
    }

    .header .wc-navbar .wc-navlist .logo {
        display: none;
    }

    .header .wc-navbar .wc-navlist ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header .wc-navbar .wc-navlist ul li a {
        padding: 5px 15px;
        position: relative;
        transition: .4s all ease;
        width: 100%;
        display: block;
    }

    .header .wc-navbar .wc-navlist ul li a.active{
        color: var(--color-secondary);
    }

    .header .wc-navbar .wc-navlist ul li a.active svg path{
        fill: var(--color-secondary);
    } 

    .header .wc-navbar .wc-navlist ul li a::after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 0%;
        content: '.';
        color: transparent;
        background: var(--color-primary);
        height: 1px;
    }

    .header .wc-navbar .wc-navlist ul li a:hover::after {
        width: 100%;
        transition: .4s all ease;
    }

    .header .wc-navbar .wc-navlist ul li a svg {
        margin-left: 5px;
        vertical-align: middle;
        height: 14px;
    }

    .header .wc-navbar .wc-navlist .parent-menu {
        position: relative;
    }

    .header .wc-navbar .wc-navlist .sub-menu {
        position: absolute;
        left: 0;
        top: 180%;
        margin: 0;
        padding: 10px 0;
        z-index: 99;
        background: var(--color-five);
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
        border-radius: 9px;
        min-width: 190px;
        display: none;
        height: auto;
    }

    .header .wc-navbar .wc-navlist .parent-menu.on a svg {
        transform: rotate(180deg);
    }


    .header .wc-navbar .wc-navlist .sub-menu .header .wc-navbar .wc-navlist .sub-menu li a {
        font-size: var(--p-16);
    }

    .header .wc-navbar .wc-social-btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .header .wc-navbar .wc-social-btn .wc-search {
        padding-right: 19px;
    }

    .header .wc-navbar .wc-social-btn .wc-search .home-one-search path {
        fill: unset;
    }

    .header .wc-navbar .wc-social-btn .wc-connect a {
        padding: 10px 26px;
    }

    .header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap {
        transition: .4s all ease;
        background-color: var(--color-dark);
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        display: table;
        z-index: 99;
    }

    .header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap.active {
        top: 0;
    }

    .header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap .wc-search-middle {
        max-width: 900px;
        margin: 0 auto;
        position: relative;
    }
/*#search-loader{
    display: flex;
}*/
    .header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap .wc-search-middle .wc-search-close-btn {
        position: absolute;
        right: 20px;
        top: 10px;
        cursor: pointer;
        width: 30px;
        height: 30px;
        text-align: center;
        color: var(--color-four);
        font-size: 38px;
        border-radius: 37px;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    .header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap .wc-search-middle .wc-search-close-btn button {
    background-color: transparent;
    border: 0;
}
.header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap .wc-search-middle .wc-search-close-btn svg {
    width: 20px;
    height: 18px;
}
    .header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap .wc-search-middle .form-control {
        display: block;
        width: 100%;
        height: 50px;
        padding: 4px 10px;
        font-size: var(--a-17);
        color: var(--color-third);
        background: transparent;
        background-image: none;
        border: 0;
        border-bottom: 1px solid #000;
        transition: ease-in-out .4s;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .header .wc-navbar .wc-social-btn .wc-search .wc-search-wrap .wc-search-middle .form-control:focus {
        outline: none;
    }

    .header .wc-navbar .wc-social-btn .wc-search a svg {
        padding-right: 6px;
        font-size: 14px;
        vertical-align: middle;
    }

    .header .wc-navbar .wc-social-btn .fa-bars {
        display: none;
    }

    .header .wc-navbar .wc-social-btn .fa-xmark {
        display: none;
        position: absolute;
        z-index: 9;
        right: 0px;
        top: 12px;

    }
div#combined-search-results {
    padding: 30px;
    overflow-x: auto;
    max-height: 400px;
    border: 1px solid #F1DDB0;
    background-color: #fff;
}
#combined-search-results section ul{
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

#combined-search-results section ul .img-cover {
        flex-shrink: 0;
}

#combined-search-results section ul img,
#combined-search-results section ul svg {
    width: 100%;
    max-width: 80px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
}

#combined-search-results section ul li {
    display: flex;
    align-items: center;
    gap: 10px;
}

#combined-search-results section h6 {
    margin-bottom: 20px;
}

div#combined-search-results .search_view_btn {
    text-align: end;
}

/*=====================================
    02. hero style CSS
    =======================================*/

    .hero {
        padding: 200px 0;
        position: relative;
        background-color: var(--color-light);
    }

    .hero .hero-vector1 {
        position: absolute;
        top: 100px;
        left: 0;
    }

    .hero .hero-vector2 {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
    }

    .hero .wc-hero {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .hero .wc-hero .hero-title h1 {
        max-width: 886px;
        margin-bottom: 32px;
        position: relative;
    }

    .hero .wc-hero .hero-title p {
        max-width: 780px;
        margin-bottom: 46px;
        font-size: var(--h6-18);
        line-height: 28px;
        position: relative;
    }

    .hero .wc-hero .hero-image {
        max-width: 760px;
        width: 100%;
    }

    .wc-hero-image {
        max-width:760px;
        width: 100%;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .wc-hero-image:before {
        padding-top: 79%;
    }

    .hero .wc-hero .hero-image img {
        padding: 40px 45px;
    }

    .hero .wc-hero .hero-image .hero-image-text h2 {
        position: absolute;
        left: -58px;
        bottom: -37px;
        color: var(--color-five);
        font-size: 32px;
        background-color: var(--color-primary);
        border-radius: 200px;
        padding: 15px 45px;
        max-width: 320px;
        width: 100%;
        line-height: 45px;
        text-align: center;
    }

    .hero .wc-hero .btn {
        font-weight: var(--semi-bold)
    }

/*=====================================
    03. partner style CSS
    =======================================*/
    .partner .partner-image .swiper{
        width: 100%;
    }

    .partner .partner-image {
        display: flex;
        justify-content: space-between;
    }

    .partner .partner-image .wc-image {
        background-color: var(--color-five);
        padding: 10px 35px;
        border: 1px solid var(--color-secondary);
        border-radius: 8px;
        max-width: 230px;
        margin: 0 auto;
    }

    .partner .partner-image .wc-image img{
        opacity: 0.3;
        filter: invert(110%) sepia(70%) saturate(7%) hue-rotate(339deg) brightness(60%) contrast(49%);
    }

    .partner .partner-image .wc-image img:hover{
        opacity: unset;
        filter: unset;
    }

/*=====================================
    04. training style CSS
    =======================================*/

    .training .training-wrapper {
        justify-content: space-between;
        align-items: center;
    }

    .training .training-wrapper .training-image {
        max-width: 660px;
        width: 100%;
        margin-right: 42px;
    }

    .training .training-wrapper .training-content {
        margin-left: 42px;
    }

    .training .training-wrapper .training-content h2 {
        max-width: 650px;
        margin-bottom: 25px;
        text-align: start;
    }

    .training .training-wrapper .training-content p {
        max-width: 635px;
        margin-bottom: 30px;
    }

    .training .training-wrapper .training-content .training-achiev-wrapper {
        justify-content: space-between;
    }

    .training .training-wrapper .training-content .training-achiev-wrapper .training-achiev img {
        margin-bottom: 20px;
    }

    .training .training-wrapper .training-content .training-achiev-wrapper .advices img {
        max-width: 60px;
        height: 60px;
    }

    .training .training-wrapper .training-content .training-achiev-wrapper .Customers img {
        max-width: 49px;
        height: 60px;
    }

    .training .training-wrapper .training-content .training-achiev-wrapper .Experiences img {
        max-width: 60px;
        height: 60px;
    }


    .training .training-wrapper .training-content .training-achiev-wrapper .training-achiev h3 {
        margin-bottom: 7px;
    }

/*=====================================
    05. needs style CSS
    =======================================*/
    .needs {
        padding-top: 0px;
    }

    .needs .needs-wrapper {
        justify-content: space-between;
        align-items: center;
    }

    .needs .needs-wrapper .needs-content h2 {
        margin-bottom: 25px;
        max-width: 676px;
        text-align: start;
    }

    .needs .needs-wrapper .needs-content p {
        margin-bottom: 35px;
        max-width: 635px;
    }

    .needs .needs-wrapper .needs-image {
        max-width: 660px;
        width: 100%;
        position: relative;
        margin-left: auto;
    }

    .needs .needs-wrapper .needs-image:before {
        padding-top: 76%;
    }

    .needs .needs-wrapper .needs-image .nedds-video-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .needs .needs-wrapper .needs-image .nedds-video-btn .btn {
        background-color: var(--color-primary) !important;
        height: 68px;
        width: 68px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
    }

    .needs .needs-wrapper .needs-image .nedds-video-btn .btn svg path {
        fill: var(--color-five) !important;
    }

/*=====================================
    06. our-services style CSS
    =======================================*/

    .our-services .our-services-title h2 {
        text-align: center;
        margin-bottom: 60px;
    }

    .our-services .our-services-wrapper {
        justify-content: center;
        align-items: top;
    }

    .our-services .our-services-wrapper .our-services-content {
        padding: 0 68px;
        display: block;
    }

    .our-services .our-services-wrapper .our-services-content .our-services-icon {
        height: 60px;
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        margin: 0 auto 25px;
        background-color: var(--color-primary);
    }

    .our-services .our-services-wrapper .our-services-content .our-services-icon svg{
        height: 30px!important;
    }

    .our-services .our-services-wrapper .our-services-content .our-services-icon svg path {
        fill: var(--color-five);
    }

    .our-services .our-services-wrapper .our-services-content h4 {
        text-align: center;
        margin-bottom: 15px;
    }

    .our-services .our-services-wrapper .our-services-content p {
        text-align: center;
        max-width: 360px;
        margin: 0 auto;
    }

/*=====================================
    07. team style CSS
    =======================================*/

    .team .team-head-wrapper {
        justify-content: space-between;
        align-items: center;
    }

    .team .team-head-wrapper .team-btn {
        text-align: right;
    }

    .team .team-head-wrapper .team-head-title h2 {
        margin-bottom: 15px;
        text-align: start;
    }

    .team .team-head-wrapper .team-head-title p {
        max-width: 680px;
        margin-bottom: 35px;
    }

    .team .wc-team-image-wrapper {
        justify-content: space-between;
    }

    .team .wc-team-image-wrapper .image-content {
        background-color: var(--color-five);
        padding: 18px;
        border-radius: 10px;
        margin: -80px 35px 0;
        z-index: 1;
        position: relative;
        text-align: center;
        box-shadow: 0px 2px 12px 0px rgba(1, 69, 44, 0.25);
    }

    .team .wc-team-image-wrapper .team-image {
        padding-bottom: 60px;
    }

    .team .wc-team-image-wrapper .team-image .image {
        position: relative;
        overflow: hidden;
        display: block;
    }

    .team .wc-team-image-wrapper .team-image .image::before {
        padding-top: 80%;
        display: block;
        content: '';
    }

    .team .wc-team-image-wrapper .team-image .image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    .team .wc-team-image-wrapper .image-content p {
        margin-bottom: 8px;
    }

    .team .wc-team-image-wrapper .image-content > a {
        margin-bottom: 14px;
        font-size: var(--h5-20);
        font-weight: var(--bold);
        line-height: var(--line-height-26);
        display: block;
        color: var(--color-third);
    }

    .team .wc-team-image-wrapper .image-content > a:hover{
        color: var(--color-primary);
    }

    .team .wc-team-image-wrapper .image-content .social-info a {
        padding: 0 7px;
    }

    .team .wc-team-image-wrapper .image-content .social-info a:hover svg path {
        fill: var(--color-secondary)
    }

    .team .wc-team-image-wrapper .image-content .social-info a svg path {
        fill: var(--color-six);
    }

/*=====================================
    08. portfolio style CSS
    =======================================*/

    .portfolio {
        position: relative;
    }

    .portfolio .hero-vector1 {
        position: absolute;
        top: -40px;
        left: 0;
    }

    .portfolio .hero-vector2 {
        position: absolute;
        right: 0px;
        bottom: 70px;
    }

    .portfolio .portfolio-head .portfolio-title h2 {
        text-align: center;
        max-width: 620px;
        margin: 0 auto 50px;
    }

    .portfolio .portfolio-head .portfolio-tab {
        white-space: nowrap;
        overflow: auto;
        text-align: center;
    }

    .portfolio .portfolio-head .portfolio-tab::-webkit-scrollbar {
        display: none;
    }

    .portfolio .portfolio-head .portfolio-tab .portfolio-list {
        display: inline-flex;
    }

    .portfolio .portfolio-head .portfolio-tab ul li a {
        margin: 0 12px;
        background-color: transparent;
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .portfolio .portfolio-head .portfolio-tab ul li a:hover{
        background-color: var(--color-primary);
        color: var(--color-five);
    }

    .portfolio .portfolio-head .portfolio-tab ul li a.active {
        background-color: var(--color-primary);
        color: var(--color-five);
    }

    .portfolio .portfolio-wrapper {
        justify-content: center;
        align-items: center;
        margin-top: 65px;
    }

    .portfolio .portfolio-wrapper .portfolio-image {
        max-width: 558px;
        width: 100%;
        margin: 0 auto;
    }

    .portfolio .portfolio-wrapper .portfolio-image:before {
        padding-top: 78%;
    }

    .portfolio .portfolio-wrapper .portfolio-content {
        padding: 0 30px;
        position: relative;
        z-index: 9;
    }

    .portfolio .portfolio-wrapper .portfolio-content h2 {
        text-align: start;
    }

    .portfolio .portfolio-wrapper .portfolio-content p {
        max-width: 652px;
        margin-bottom: 35px;
        margin-top: 25px;
        position: relative;
        z-index: 1;
    }

/*=====================================
    09. blog style CSS
    =======================================*/

    .blog .blog-head-wrapper {
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
    }

    .blog .blog-head-wrapper .blog-head-title h2 {
        text-align: start;
        margin-bottom: 15px;
    }

    .blog .blog-head-wrapper .blog-btn {
        text-align: end;
    }

    .blog .blog-head-wrapper .blog-head-title p {
        max-width: 680px;
        margin-top: 15px;
    }

    .blog .blog-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 40px;
    }

    .blog .blog-wrapper .wc-column-4{
        max-width: 100%;
    }

    .blog .blog-wrapper .blog-content {
        background-color: var(--color-five);
        padding: 20px 20px 22px 20px;
        box-shadow: 0px 4px 13px 0px rgba(1, 69, 44, 0.15);
        border-radius: 15px;
        height: 100%;
    }

    .blog .blog-wrapper .blog-content .blog-image {
        max-width: 420px;
        position: relative;
        overflow: hidden;
    }

    .blog .blog-wrapper .blog-content .blog-image::before {
        padding-top: 61%;
    }

    .blog .blog-wrapper .blog-content .blog-image img {
        transition: all 0.4s ease-in-out;
    }

    .blog .blog-wrapper .blog-content .blog-image img:hover {
        transform: scale(1.1);
    }

    .blog .blog-wrapper .blog-content .blog-image .blog-date {
        position: absolute;
        top: 0;
        right: 16px;

    }

    .blog .blog-wrapper .blog-content .blog-image .blog-date p {
        background-color: var(--color-secondary);
        font-weight: var(--semi-bold);
        font-size: 12px;
        line-height: 22px;
        max-width: 98px;
        padding: 4px 12px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        color: var(--color-six);
    }

    .blog .blog-wrapper .blog-content h4 {
        margin-top: 22px;
        margin-bottom: 14px;
        font-weight: var(--semi-bold);
        line-height: 22px;
    }

    .blog .blog-wrapper .blog-content h4:hover{
        color: var(--color-primary);
    }

    .blog .blog-wrapper .blog-content p {
        max-width: 414px;
        margin-bottom: 30px;
    }

/*=====================================
    10. testimonial style CSS
    =======================================*/

    .testimonial {
        position: relative;
        padding-top: 200px;
        padding-bottom: 200px;
    }

    .testimonial .testimonial-bg-image {
        position: absolute;
        right: 0;
        max-width: 50%;
        z-index: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .testimonial .testimonial-wrapper {
        background-color: var(--color-seven);
        padding: 66px 80px 55px;
        border-radius: 20px;
        margin-left: 120px;
        max-width: 860px;
        box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.12);
        position: relative;
        z-index: 1;
    }

    .testimonial .testimonial-wrapper .quotes-image {
        max-width: 70px;
        height: 70px;
        margin: 0 auto 20px;
    }

    .testimonial .testimonial-wrapper p {
        max-width: 700px;
        margin: 0 auto 25px;
        text-align: center;
        font-size: var(--h5-20);
        line-height: 34px;
    }

    .testimonial .testimonial-wrapper h5 {
        text-align: center;
        margin-bottom: 7px;
        line-height: 24px;
        color: var(--color-primary);
    }

    .testimonial .testimonial-wrapper .testimonial-image {
        max-width: 90px;
        height: 90px;
        margin: 0 auto 23px;
    }

    .testimonial .testimonial-wrapper .testimonial-founder {
        margin-bottom: 45px;
    }

    .testimonial .testimonial-wrapper .swiper-pagination-bullet {
        height: 10px;
        width: 10px;
        background-color: var(--color-primary);
        opacity: 1;
        transition: .4s;
    }

    .testimonial .testimonial-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 35px;
        height: 10px;
        border-radius: 20px;
    }

/*=====================================
    11. newslatter style CSS
    =======================================*/

    .newslatter {
        padding: 47px 0;
    }

    .newslatter .newslatter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .newslatter .newslatter-wrapper .newslatter-head h2 {
        color: var(--color-five);
        margin-bottom: 0 !important;
    }

    .newslatter .newslatter-wrapper .newslatter-input {
        max-width: 400px;
        width: 100%;
        position: relative;
        height: 54px;
    }

    .newslatter .newslatter-wrapper .newslatter-input .send-btn {
        position: absolute;
        top: 0;
        right: 0;
    }

    .newslatter .newslatter-wrapper .newslatter-input .send-btn .mail-btn {
        background-color: var(--color-secondary);
        padding: 10px 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 3px;
        cursor: pointer;
        border: 1px solid var(--color-secondary);
        transition: .2s all ease;
    }

    .newslatter .newslatter-wrapper .newslatter-input .send-btn .mail-btn:hover{
        background-color: var(--color-five);
    }

    .newslatter .newslatter-wrapper .newslatter-input .send-btn .mail-btn:focus-visible {
        outline: 0px;
    }

    .newslatter .newslatter-wrapper .newslatter-input .send-btn .mail-btn svg path {
        fill: var(--color-third);
    }

    .newslatter .newslatter-wrapper .newslatter-input input {
        background-color: var(--color-five);
        padding: 14px 85px 14px 25px;
        width: 100%;
        height: 100%;
        border-radius: 2px;
        border: 0;
        font-size: var(--p-16);
        line-height: var(--line-height-26);
    }

    .newslatter .newslatter-wrapper .newslatter-input input:focus {
        outline: none;
    }

/*=====================================
    12. footer style 1 CSS
    =======================================*/

    .footer .wc-footer {
        display: flex;
        justify-content: space-between;
        padding: 60px 0;
    }

    .footer .wc-footer-logo a {
        max-width: 195px;
        display: block;
        margin-bottom: 25px;
    }

    .footer .wc-footer-logo p {
        max-width: 393px;
    }

    .footer .wc-footer-menu h4 {
        margin-bottom: 15px;
    }

    .footer .wc-footer-menu .contact-menu ul li {
        position: relative;
        padding-left: 30px;
    }

    .footer .wc-footer-menu .menu ul li a {
        color: var(--color-third);
        margin-bottom: 7px;
        display: block;
        font-weight: var(--regular);
        font-size: var(--p-16);
    }

    .footer .wc-footer-menu .menu ul li a:hover {
        color: var(--color-primary);
    }

    .footer .wc-footer-menu .contact-menu ul li a {
        display: flex;
        margin-bottom: 0;
    }

    .footer .wc-footer-menu .contact-menu ul li a span {
        position: absolute;
        top: 0;
        left: 0;
    }

    .footer .wc-footer-menu .contact-menu ul li a svg {
        margin-right: 10px;
    }

    .footer .wc-footer-menu .contact-menu ul li a p {
        margin-bottom: 20px;
        max-width: 231px;
        line-height: var(--line-height-26);
    }

    .footer .wc-footer-menu .contact-menu ul li a p:hover {
        color: var(--color-primary);
    }

    .footer .wc-copy {
        display: flex;
        justify-content: space-between;
        padding: 25px 0;
        border-top: 1px solid rgba(111, 111, 111, 0.50);
    }

    .footer .wc-copy .wc-copy-text {
        display: flex;
        align-items: center;
    }

    .footer .wc-copy .wc-copy-text a:hover {
        color: var(--color-secondary);
    }

    .footer .wc-copy .wc-social-logo ul {
        display: flex;
    }

    .footer .wc-copy .wc-social-logo ul li a {
        padding-left: 14px;
    }

    .footer .wc-copy .wc-social-logo ul li a:hover svg path {
        fill: var(--color-secondary);
    }

/**************************************
    Home two style
    ***************************************/

/*=====================================
    01. header style 2 CSS
    =======================================*/

    .header-two.sticky {
        background-color: rgb(1 69 44 / 88%);
        padding: 10px 0;
    }

    .header-two.sticky .wc-navbar {
        padding: 10px;
        transition: .3s all ease;
    }

    .header-two.sticky .header-two-top-bar{
        margin-top: -66px;
    }

    .header-two .header-two-top-bar{
        transition: .3s all ease;
    }

    .header-two .wc-row {
        justify-content: space-between;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .header-two .header-contact a {
        font-size: 15px;
        line-height: 24px;
        color: var(--color-five);
        margin-right: 20px;
    }

    .header-two .header-contact a svg path {
        fill: var(--color-five);
    }

    .header-two .header-contact a:hover {
        color: var(--color-secondary);
    }

    .header-two .wc-social-logo ul {
        display: flex;
        justify-content: flex-end;
    }

    .header-two .wc-social-logo ul li a {
        padding-left: 13px;
    }

    .header-two .wc-social-logo ul li a svg path {
        fill: var(--color-five) !important;
    }

    .header-two .wc-social-logo ul li a:hover svg path {
        fill: var(--color-secondary) !important;
    }

    .header-two .wc-navbar {
        background-color: var(--color-five);
        padding: 20px;
        border-radius: 15px;
    }

    .header-two .wc-navbar .wc-social-btn .fa-xmark {
        top: -10px;
    }

/*=====================================
    02. hero style 2 CSS
    =======================================*/

    .hero-two {
        position: relative;
        padding-top: 345px;
        padding-bottom: 238px;
    }

    .hero-two .hero-two-back-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .hero-two::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(1, 69, 44, 0.50);
        z-index: 0;
    }

    .hero-two .hero-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }

    .hero-two .hero-content h1 {
        max-width: 1034px;
        margin: 0 auto;
        position: relative;
        z-index: 9;
        color: var(--color-five);
    }

    .hero-two .hero-content p {
        max-width: 600px;
        margin: 25px auto 40px;
        color: var(--color-five);
    }

    .hero-two .hero-content .hero-next-btn,
    .hero-two .hero-content .hero-prev-btn {
        position: relative;
    }

    .hero-two .hero-two-back-image .swiper {
        height: 100%;
    }

    .hero-two .hero-two-back-image img {
        height: 100%;
        object-fit: cover;
    }

/*=====================================
    03. our-services style 2 CSS
    =======================================*/


    .services-two .services-two-title h2 {
        text-align: center;
        margin-bottom: 15px;
    }

    .services-two .services-two-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 40px;
    }

    .services-two .services-two-wrapper .services-two-content {
        border-radius: 15px;
        padding: 38px 30px;
        margin-top: 40px;
        transition: .5s all ease;
        height: 100%;
        display: block;
    }

    .services-two .services-two-wrapper .services-two-content:hover {
        background-color: var(--color-primary);
    }

    .services-two .services-two-wrapper .services-two-content:hover h4 {
        color: #fff;
    }

    .services-two .services-two-wrapper .services-two-content:hover p {
        color: #fff;
    }

    .services-two .services-two-wrapper .services-two-content .services-icon {
        height: 80px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        margin: 0 auto 25px;
        background-color: var(--color-five);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    }

    .services-two .services-two-wrapper .services-two-content .services-icon svg{
        height: 40px!important;
    }

    .services-two .services-two-wrapper .services-two-content h4 {
        text-align: center;
        margin-top: 24px;
    }

    .services-two .services-two-wrapper .services-two-content p {
        max-width: 400px;
        margin: 15px auto 0;
        text-align: center;
    }

/*=====================================
    04. training style 2 CSS
    =======================================*/
    .training-two-count-wrapper {
        justify-content: center;
        margin-top: 80px;
        max-width: 1151px;
        margin-left: auto;
        margin-right: auto;
    }

    .training-two-count-wrapper .wc-count {
        text-align: center;
        position: relative;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .training-two-count-wrapper .wc-column-3:nth-child(2) {
        border-left: 1px solid var(--color-dark);
        border-right: 1px solid var(--color-dark);
    }

    .training-two-count-wrapper .wc-column-3:nth-child(3) {
        border-right: 1px solid var(--color-dark);
    }

    .training-wrapper .training-image {
        position: relative;
        overflow: hidden;
    }

    .training-wrapper .training-image::before {
        content: '';
        padding-top: 76%;
        display: block;
    }

    .training-wrapper .training-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/*=====================================
    05. team-two style 2 CSS
    =======================================*/

    .team-two .team-head-title {
        text-align: center;
    }

    .team-two .team-head-title p {
        max-width: 700px;
        width: 100%;
        margin: 16px auto 45px;
    }

    .team-two .wc-team-image-wrapper .team-image .image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 140px;
    }

/*=====================================
    06. pricing style 2 CSS
    =======================================*/

    .pricing .pricing-title h2 {
        text-align: center;
        margin-bottom: 50px;
    }

    .pricing .pricing-wrapper {
        gap: 45px;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .pricing .pricing-wrapper .pricing-col {
        border-radius: 15px;
        box-shadow: 0px 0px 12px 0px #EEE;
        padding: 35px 30px;
        max-width: 400px;
        width: 100%;
    }

    .pricing .pricing-wrapper .pricing-col h4 {
        font-weight: var(--medium);
        margin-bottom: 15px;
    }

    .pricing .pricing-wrapper .pricing-col p {
        max-width: 340px;
    }

    .pricing .pricing-wrapper .pricing-col .pricing-nub {
        background-color: var(--color-dark);
        max-width: 190px;
        margin-top: 30px;
        margin-bottom: 24px;
        border-radius: 8px;
        padding: 6px 35px 6px 22px;
    }

    .pricing .pricing-wrapper .pricing-col .pricing-nub span {
        font-size: 35px;
        line-height: 48px;
        font-weight: var(--medium);
        color: var(--color-third);
    }

    .pricing .pricing-wrapper .pricing-col .pricing-nub p {
        color: var(--color-third);
        font-weight: var(--medium);
    }

    .pricing .pricing-wrapper .pricing-col ul {
        list-style: unset;
        margin-bottom: 41px;
        padding-left: 20px;
    }

    .pricing .pricing-wrapper .pricing-col ul li {
        content: "\2022";
        color: var(--color-four);
    }

    .pricing .pricing-wrapper .pricing-col .pricing-btn .btn {
        font-weight: var(--medium);
        padding: 10px 45px;
    }

/*=====================================
    07. work style 2 CSS
    =======================================*/
.work.section{
    background-color: var(--color-seven);
}
    .work .work-wrap {
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }

    .work .work-wrap .work-image {
        padding-right: 35px;
        position: relative;
        overflow: hidden;
        max-width: 660px;
        width: 100%;
    }

    .work .work-wrap .work-image::before {
        padding-top: 80%;
        display: block;
        content: '';
    }

    .work .work-wrap .work-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    .work .work-wrap .work-content {
        padding-left: 35px;
    }

    .work .work-wrap .work-content h2 {
        margin-bottom: 30px;
        text-align: start;
    }

    .work .work-wrap .work-content .work-text {
        max-width: 503px;
        margin-bottom: 30px;
    }

    .work .work-wrap .work-content .work-text:nth-child(4) {
        margin-bottom: 0;
    }

    .work .work-wrap .work-content .work-text h4 {
        margin-bottom: 10px;
    }

/*=====================================
    08. blog-two style 2 CSS
    =======================================*/

    .blog-two .blog-wrapper {
        align-items: normal;
    }

    .blog-two .blog-wrapper .blog-content .blog-image {
        max-width: 100%;
    }

    .blog-two .blog-wrapper .blog-content .blog-text h5 {
        margin-bottom: 12px;
    }

    .blog-two .blog-wrapper .blog-right .blog-content {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 25px;
    }

    .blog-two .blog-two-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-two .blog-two-wrapper .blog-content {
        background-color: var(--color-five);
        border-radius: 15px;
        box-shadow: 0px 4px 13px 0px rgba(1, 69, 44, 0.15);
        padding: 20px 20px 22px;
        grid-row: 1 / span 2;
        max-width: 100%;
        margin-right: 14px;
    }

    .blog-two .blog-two-wrapper .blog-content .blog-content-image {
        position: relative;
        overflow: hidden;
        max-width: 676px;
    }

    .blog-two .blog-two-wrapper .blog-content .blog-content-image::before {
        content: "";
        display: block;
        padding-top: 50%;
    }

    .blog-two .blog-two-wrapper .blog-content .blog-content-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    .blog-two .blog-two-wrapper .blog-content h4 {
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .blog-two .blog-two-wrapper .blog-content h4:hover{
        color: var(--color-primary);
    }

    .blog-two .blog-two-wrapper .blog-content p {
        max-width: 676px;
        margin-bottom: 22px;
    }

    .blog-two .blog-two-wrapper .blog-right-inner {
        display: flex;
        justify-content: space-between;
        background-color: var(--color-five);
        box-shadow: 0px 4px 13px 0px rgba(1, 69, 44, 0.15);
        border-radius: 15px;
        padding: 20px;
        margin-left: 14px;
    }

    .blog-two .blog-two-wrapper .blog-right-up {
        margin-bottom: 25px;
    }

    .blog-two .blog-two-wrapper .blog-right-inner .blog-content-image {
        position: relative;
        overflow: hidden;
        max-width: 300px;
        width: 100%;
    }

    .blog-two .blog-two-wrapper .blog-right-inner .blog-content-image::before {
        content: "";
        display: block;
        padding-top: 75%;
    }

    .blog-two .blog-two-wrapper .blog-right-inner .blog-content-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: 10px;
    }

    .blog-two .blog-two-wrapper .blog-right-inner .blog-two-text h4 {
        margin-bottom: 12px;
    }

    .blog-two .blog-two-wrapper .blog-right-inner .blog-two-text h4:hover{
        color: var(--color-primary);
    }

    .blog-two .blog-two-wrapper .blog-right-inner .blog-two-text p {
        margin-bottom: 28px;
    }

    .blog-two .blog-two-wrapper .blog-right-inner .blog-two-text {
        width: 100%;
        padding-left: 22px;
    }

/*=====================================
    09. testimonial-two style 2 CSS
    =======================================*/

    .testimonial-two {
        padding-top: 40px;
    }

    .testimonial-two .testimonial-two-title h2 {
        text-align: center;
        margin-bottom: 45px;
    }

    .testimonial-two .testimonial-two-wrapper {
        gap: 40px;
        flex-wrap: nowrap;
    }

    .testimonial-two .testimonial-two-wrapper .testimonial-two-col {
        border: 1px solid #000;
        border-radius: 25px;
        padding: 30px;
        height: 100%;
            display: grid;
    align-content: space-between;
    }

    .testimonial-two .testimonial-two-wrapper .testimonial-two-col h2 {
        font-size: 120px;
        line-height: var(--line-height-55);
        color: var(--color-primary);
    }

    .testimonial-two .testimonial-two-wrapper .testimonial-two-col p {
        margin-bottom: 21px;
    }

    .testimonial-two .testimonial-two-wrapper .testimonial-two-col .testimonial-two-client {
        display: flex;
        align-items: center;
    }

    .testimonial-two .testimonial-two-wrapper .testimonial-two-col .testimonial-two-client .testimonial-two-image {
        max-width: 60px;
        width: 100%;
        position: relative;
        overflow: hidden;
        margin-right: 20px;
    }

    .testimonial-two .testimonial-two-wrapper .testimonial-two-col .testimonial-two-client .testimonial-two-image::before {
        content: "";
        display: block;
        padding-top: 100%;
    }

    .testimonial-two .testimonial-two-wrapper .testimonial-two-col .testimonial-two-client .testimonial-two-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    .testimonial-two .testimonial-two-wrapper .testimonial-two-col .testimonial-two-client .testimonial-two-text p {
        margin-bottom: 0;
    }

    .testimonial-two-wrapper .swiper-slide{
        height: auto;
    }

    .testimonial-two .testimonial-two-slide-btn {
        display: flex;
        justify-content: center;
        margin-top: 45px;
    }

    .testimonial-two .testimonial-two-slide-btn .slider-btn {
        border-color: var(--color-primary);
        background-color: var(--color-dark);
        transition: .5s all;
    }

    .testimonial-two .testimonial-two-slide-btn .slider-btn:hover {
        background-color: var(--color-five);
    }

    .testimonial-two .testimonial-two-slide-btn .testimonial-two-prev-btn{
        padding-right: 12px;
    }

    .testimonial-two .testimonial-two-slide-btn .testimonial-two-next-btn{
        padding-left: 12px;
    }

/*=====================================
    10. newslatter-two style 2 CSS
    =======================================*/

    .newslatter-two {
        background-color: var(--color-dark);
        padding: 0;
    }

    .newslatter-two .newslatter-wrapper {
        border-bottom: 1px solid rgba(111, 111, 111, 0.50);
        padding-top: 50px;
        padding-bottom: 54px;
    }

    .newslatter-two .newslatter-wrapper .newslatter-head h2 {
        color: var(--color-third);
        margin-bottom: 0 !important;
    }

/*=====================================
    11. footer-two style 2 CSS
    =======================================*/

    .footer-two .footer-col {
        width: 100%;
    }

    .footer-two .wc-footer-logo {
        max-width: 356px;
    }

    .footer-two .wc-footer-official {
        max-width: 265px;
    }

    .footer-two .wc-footer-official .contact-call p:first-child {
        margin-bottom: 0;

    }

    .footer-two .wc-footer-link {
        max-width: 98px;
    }

    .footer-two .wc-footer-logo p {
        max-width: 355px;
    }

    .footer-two .wc-social-logo ul {
        display: flex;
        margin-top: 22px;
    }

    .footer-two .wc-social-logo ul li a {
        margin-right: 14px;
    }

    .footer-two .wc-social-logo ul li a:hover svg path {
        fill: var(--color-secondary);
    }

    .footer-two .footer-two-terms a {
        color: var(--color-four);
        font-size: var(--p-16);
        line-height: var(--line-height-26);
    }

    .footer-two .footer-two-terms a:hover {
        color: var(--color-primary);
    }

    .footer-two .wc-footer-image {
        max-width: 280px;
    }

    .footer-two .wc-footer-image h4 {
        margin-bottom: 18px;
    }

    .footer-two .wc-footer-image .wc-footer-image-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }

    .footer-two .wc-footer-image .wc-footer-image-grid .wc-image {
        max-width: 90px;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .footer-two .wc-footer-image .wc-footer-image-grid .wc-image::before {
        content: "";
        padding-top: 100%;
        display: block;
    }

    .footer-two .wc-footer-image .wc-footer-image-grid .wc-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: 5px;
    }


/**************************************
    Home three style
    ***************************************/

/*=====================================
    01. header-three style 3 CSS
    =======================================*/

    .header-three.sticky {
        background-color: transparent;
        padding-bottom: 0px;
        padding-top: 0px;
    }

    .header-three .header-topbar {
        background-color: #01452C;
    }

    .header-three.sticky .header-two-top-bar {
        margin-top: -46px;
    }

    .header-three .wc-row {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .header-three .header-navbar {
        background-color: var(--color-five);
    }

    .header-three .wc-navbar {
        border-radius: 0px;
        background-color: transparent;
        padding-left: 0!important;
        padding-right: 0!important;
    }


    .header-three .wc-navbar .header-contact {
        justify-content: start;
    }

    .header-three .header-contact a svg path {
        fill: var(--color-five);
    }

    .header-three .header-contact .fa-phone {
        display: none;
        margin-right: 6px;
        font-size: 14px;
        padding: 5px;
        border-radius: 50px;
        border: 1px solid var(--color-five);
    }

    .header-three .wc-navbar .wc-social-btn .fa-xmark {
        top: 10px;
    }

/*=====================================
    02. hero-three style 3 CSS
    =======================================*/

    .hero-three {
        padding-top: 200px;
        padding-bottom: 55px;
        position: relative;
    }

    .hero-three .hero-three-slider-btn {
        position: absolute;
        top: 50%;
        left: 40px;
        z-index: 9;
    }

    .hero-three .hero-three-vector1 {
        position: absolute;
        max-width: 225px;
        width: 100%;
        top: 150px;
        left: 0;
    }

    .hero-three .hero-three-vector2 {
        position: absolute;
        max-width: 220px;
        width: 100%;
        bottom: 40px;
        left: 32%;
    }

    .hero-three .hero-three-vector3 {
        position: absolute;
        max-width: 225px;
        width: 100%;
        bottom: 75px;
        right: 0;
    }

    .hero-three .hero-three-slider-btn .hero-prev-btn {
        margin-bottom: 22px;
    }

    .hero-three .slider-btn {
        border-color: #000;
    }

    .hero-three .slider-btn rect {
        stroke: #000;
    }

    .hero-three .slider-btn path {
        stroke: #000;
    }

    .hero-three .hero-three-slider {
        justify-content: space-between;
        align-items: center;
    }

    .hero-three .hero-three-slider .hero-three-slider-left {
        max-width: calc(100vw - 677px);
        width: fit-content;
    }

    .hero-three .hero-three-slider .hero-three-slider-right {
        max-width: 638px;
    }

    .hero-three .hero-three-slider .hero-three-image {
        margin-right: -230px;
        position: relative;
        z-index: 9;
        width: fit-content;
    }

    .hero-three .hero-three-slider .hero-three-image .image-wrapper {
        display: flex;
        justify-content: center;
    }

    .hero-three .hero-three-slider .hero-three-image .image-wrapper .image img {
        border: 2px solid var(--color-primary);
        padding: 28px;
        background-color: var(--color-five);
        border-radius: 50%;
    }

    .hero-three .hero-three-slider .hero-three-image .image-wrapper .image:nth-child(1) {
        max-width: 421px;
        width: 100%;
    }

    .hero-three .hero-three-slider .hero-three-image .image-wrapper .image:nth-child(2) {
        max-width: 370px;
        width: 100%;
        margin-top: 50px;
        margin-left: -2px;
    }

    .hero-three .hero-three-slider .hero-three-image .image-wrapper-sec {
        display: flex;
        justify-content: center;
    }

    .hero-three .hero-three-slider .hero-three-image .image-wrapper-sec .image {
        max-width: 330px;
        width: 100%;
        margin-top: -60px;
        margin-right: -33px;
    }

    .hero-three .hero-three-slider .hero-three-image .image-wrapper-sec .image img {
        border: 2px solid var(--color-primary);
        padding: 28px;
        background-color: var(--color-five);
        border-radius: 50%;
    }

    .hero-three .hero-three-slider .hero-three-content h1 {
        margin-bottom: 27px;
        position: relative;
        max-width: 720px;
        width: 100%;
    }

    .hero-three .hero-three-slider .hero-three-content p {
        margin-bottom: 50px;
        max-width: 585px;
        position: relative;
    }

/*=====================================
    03. our-services-three style 3 CSS
    =======================================*/

    .our-services-three {
        background-color: transparent;
    }

    .our-services-three .our-services-wrapper .our-services-content .our-services-icon {
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

/*=====================================
    04. training-three style 3 CSS
    =======================================*/

    .training-three {
        padding-bottom: 250px !important;
    }

    .training-three .training-wrapper .training-three-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .training-three .training-wrapper .training-three-wrapper .training-inner-img {
        width: 100%;
    }

    .training-three .training-wrapper .training-three-wrapper .training-inner-img .training-image1 {
        position: relative;
        overflow: hidden;
        max-width: 395px;
        width: 100%;
        margin-top: 17px;
        margin-bottom: 17px;
    }

    .training-three .training-wrapper .training-three-wrapper .training-inner-img .training-image1:before {
        content: '';
        padding-top: 100%;
        display: block;
    }

    .training-three .training-wrapper .training-three-wrapper .training-inner-img .training-image1 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .training-three .training-wrapper .training-three-wrapper .training-inner-img .training-image1 .mw-image {
        padding: 15px;
    }

    .training-three .training-wrapper .training-three-wrapper .training-inner-img .training-image2 {
        position: relative;
        overflow: hidden;
        max-width: 395px;
        width: 100%;
        margin-left: 20px;
    }

    .training-three .training-wrapper .training-three-wrapper .training-inner-img .training-image2:before {
        content: '';
        padding-top: 150%;
        display: block;
    }

    .training-three .training-wrapper .training-three-wrapper .training-inner-img .training-image2 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .training-three .training-wrapper .training-three-wrapper .training-inner-img .training-image2 .mw-image {
        padding: 15px;
    }

    .training-three .training-wrapper .training-three-wrapper {
        padding-right: 21px;
    }

    .training-three .training-wrapper .training-content {
        padding-left: 21px;
    }

    .training-three .training-wrapper .training-content .training-content-list {
        margin-bottom: 40px;
    }

    .training-three .training-wrapper .training-content .training-content-list p {
        margin-bottom: 14px;
        position: relative;
        padding-left: 50px;
    }

    .training-three .training-wrapper .training-content .training-content-list p::before {
        content: url(../images/check-mark-15\ 1.png);
        position: absolute;
        top: 0;
        left: 0;
    }

/*=====================================
    05. counter-three style 3 CSS
    =======================================*/

    .counter-three {
        padding-bottom: 80px;
    }

    .counter-three .counter-three-image {
        justify-content: center;
    }

    .counter-three .counter-three-image .counter-three-video {
        max-width: 800px;
        width: 100%;
        position: relative;
        margin: -170px auto 60px;
    }

    .counter-three .counter-three-image .counter-three-video .counter-video-btn {
        position: absolute;
        top: 50%;
        left: 45%;
    }

    .counter-three .counter-three-title {
        text-align: center;
        max-width: 645px;
        margin: 0 auto 45px;
    }

    .counter-three .counter-three-number {
        text-align: center;
    }

    .counter-three .counter-three-number .wc-count {
        border: 1px solid var(--color-secondary);
        background-color: #fff;
        padding: 32px 56px;
        border-radius: 250px;
        margin-left: 10px;
        margin-right: 10px;
    }

/*=====================================
    06. team-three style 3 CSS
    =======================================*/

    .team-three .team-three-title h2 {
        text-align: center;
        max-width: 715px;
        margin: 0 auto 55px;
    }

    .team-three .team-three-content {
        display: flex;
        justify-content: center;
        border: 1px solid var(--color-secondary);
        border-radius: 10px;
        margin-left: 22px;
        margin-right: 22px;
        margin-bottom: 40px;
    }

    .team-three .team-three-content .team-three-image {
        position: relative;
        overflow: hidden;
        max-width: 300px;
        width: 100%;
        margin-right: 10px;
    }

    .team-three .team-three-content .team-three-image:before {
        content: "";
        padding-top: 78%;
        display: block;
    }

    .team-three .team-three-content .team-three-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    .team-three .team-three-content .team-three-info {
        margin-left: 10px;
        padding: 30px 0;
        display: grid;
        align-content: center;
        width: 100%;
    }

    .team-three .team-three-content .team-three-info ul {
        display: flex;
        margin-top: 10px;
    }

    .team-three .team-three-content .team-three-info ul li a {
        margin-right: 8px;
        background-color: var(--color-secondary);
        padding: 7px 5px;
        border-radius: 50px;
        height: 26px;
        width: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .team-three .team-three-content .team-three-info ul li a:hover{
        background-color: var(--color-dark);
    }

    .team-three .team-three-content .team-three-info ul li a svg {
        font-size: 14px;
    }

    .team-three .team-three-content .team-three-info p {
        margin-bottom: 6px;
    }

    .team-three .team-three-content .team-three-info > a {
        margin-bottom: 10px;
        font-size: var(--h5-20);
        font-weight: var(--bold);
        line-height: var(--line-height-26);
        display: block;
        color: var(--color-third);
    }

    .team-three .team-three-btn {
        text-align: center;
        margin-top: 5px;
    }

/*=====================================
    07. choose style 3 CSS
    =======================================*/

    .choose .choose-title {
        text-align: center;
        margin-bottom: 50px;
    }

    .choose .choose-wrapper .choose-content {
        border: 1px solid var(--color-secondary);
        border-radius: 10px;
        background-color: var(--color-five);
        padding: 40px 23px 28px 23px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .choose .choose-wrapper .choose-content .choose-icon {
        height: 80px;
        width: 80px;
        background-color: var(--color-secondary);
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 25px;
    }

    .choose .choose-wrapper .choose-content .choose-icon svg path {
        stroke: var(--color-primary);
        fill: transparent;
    }

    .choose .choose-wrapper .choose-content h5 {
        margin-bottom: 15px;
        text-align: center;
    }

    .choose .choose-wrapper .choose-content p {
        text-align: center;
        max-width: 254px;
        margin: 0 auto;
    }

/*=====================================
    08. plan-three style 3 CSS
    =======================================*/

    .plan-three .plan-three-title {
        text-align: center;
        max-width: 627px;
        margin: 0 auto;
    }

    .plan-three .plan-three-wrapper {
        flex-wrap: nowrap;
        justify-content: center;
    }

    .plan-three .plan-three-wrapper .plan-three-content {
        box-shadow: 0px 4px 13px 0px rgba(1, 69, 44, 0.15);
        padding: 35px;
        border-radius: 28px;
        max-width: 570px;
        width: 100%;
    }

    .plan-three .plan-three-wrapper .left {
        margin-left: auto;
        margin-right: 20px;
    }

    .plan-three .plan-three-wrapper .plan-three-content .plan-three-icon {
        background-color: var(--color-secondary);
        border-radius:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 110px;
        width: 110px;
        border: 10px solid rgba(255, 188, 104, 0.50);
        margin: 0 auto 22px;
    }

    .plan-three .plan-three-wrapper .right {
        margin-right: auto;
        margin-left: 20px;
    }

    .plan-three .plan-three-wrapper .plan-three-content h3 {
        margin-bottom: 10px;
        text-align: center;
    }

    .plan-three .plan-three-wrapper .plan-three-content .plan-three-content-para1 {
        max-width: 400px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 188, 104, 0.50);
        padding-bottom: 28px;
        margin: 0 auto;
    }

    .plan-three .plan-three-wrapper .plan-three-content .plan-three-content-para2 {
        max-width: 400px;
        text-align: center;
        line-height: var(--line-height-38);
        margin: 18px auto 0;
    }

    .plan-three .plan-three-wrapper .plan-three-content .plan-three-btn {
        text-align: center;
        margin-top: 25px;
    }

/*=====================================
    09. blog-three style 3 CSS
    =======================================*/

    .blog-three .blog-three-title {
        text-align: center;
        color: var(--color-five);
    }

    .blog-three .blog-three-title h2 {
        color: var(--color-five);
    }

    .blog-three .blog-wrapper {
        margin-top: 50px;
        display: unset;
    }

    .blog-three .blog-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 35px;
        height: 10px;
        border-radius: 20px;
    }

    .blog-three .blog-wrapper .swiper-pagination-bullet {
        height: 10px;
        width: 10px;
        background-color: var(--color-dark);
        opacity: 1;
        transition: .4s;
    }

    .blog-three .blog-wrapper .swiper-pagination {
        position: unset;
        margin-top: 50px;
    }

/*=====================================
    10. testimonial-three style 3 CSS
    =======================================*/


    .testimonial-three .testimonial-wrapper-three .testimonial-content {
        display: flex;
        border: 2px solid var(--color-primary);
        border-radius: 10px;
        padding: 20px 45px 40px 32px;
        background-color: rgba(251, 238, 208, 0.50);
    }

    .testimonial-three .testimonial-wrapper-three .testimonial-content .testimonial-image img {
        width: 70px;
        height: 70px;
        border-radius: 50px;
    }

    .testimonial-three .testimonial-wrapper-three .testimonial-content .testimonial-info{
        padding-left: 22px;
    }

    .testimonial-three .testimonial-wrapper-three .testimonial-content .testimonial-info p {
        max-width: 518px;
        margin-bottom: 12px;
    }

    .testimonial-three .testimonial-wrapper-three .swiper-pagination {
        position: unset;
        margin-top: 50px;
    }

/*=====================================
    11. footer-three style 3 CSS
    =======================================*/
    .footer-three {
        padding: 50px 0 35px;
    }

    .footer-three .footer-three-title {
        align-items: center;
        padding-bottom: 36px;
        border-bottom: 1px solid var(--color-four);
    }

    .footer-three .footer-three-logo {
        max-width: 195px;
        width: 100%;
    }

    .footer-three .footer-three-para p {
        max-width: 670px;
        color: var(--color-five);
    }

    .footer-three .footer-three-menu {
        justify-content: center;
        padding: 50px 0;
    }

    .footer-three .footer-three-menu ul {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer-three .footer-three-menu ul li a {
        color: var(--color-five);
        font-size: var(--p-16);
        line-height: var(--line-height-26);
        font-weight: var(--regular);
        padding: 0 20px;
    }

    .footer-three .footer-three-menu ul li a:hover {
        color: var(--color-secondary);
    }

    .footer-three .footer-three-social {
        justify-content: center;
        border-bottom: 1px solid var(--color-four);
        padding-bottom: 40px;
    }

    .footer-three .footer-three-social ul {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .footer-three .footer-three-social ul li{
        padding-left: 30px;
        padding-right: 30px;
    }

    .footer-three .footer-three-social ul li a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer-three .footer-three-social ul li a p {
        color: var(--color-five);
        padding-left: 20px;
    }

    .footer-three .footer-three-social ul li a p:hover {
        color: var(--color-secondary);
    }

    .footer-three .footer-three-social ul li a span {
        background-color: var(--color-secondary);
        height: 46px;
        width: 46px;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer-three .footer-three-social ul li a span svg path {
        fill: var(--color-third);
    }

    .footer-three .footer-three-copy {
        justify-content: space-between;
        align-items: center;
        padding-top: 35px;
    }

    .footer-three .footer-three-copy .copy-text p {
        text-align: end;
        color: var(--color-five);
    }

    .footer-three .footer-three-copy .copy-text p a {
        color: var(--color-secondary);
    }

    .footer-three .footer-three-copy .copy-text p a:hover {
        color: var(--color-light);
    }


/**************************************
    about-page style
    ***************************************/

/*=====================================
    01. about-banner style CSS
    =======================================*/

    .banner {
        padding-top: 263px !important;
        padding-bottom: 163px !important;
        background-image: url(../images/about-banner.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

    .banner:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(1, 69, 44, 0.50);
    }

    .banner .banner-wrapper {
        text-align: center;
        position: relative;
        z-index: 9;
    }

    .banner .banner-wrapper h1 {
        color: var(--color-five);
        font-size: 70px;
        line-height: 80px;
        font-weight: var(--semi-bold);
    }

    .banner .banner-wrapper ul {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .banner .banner-wrapper ul li a {
        color: var(--color-five);
        font-size: var(--h6-18);
        line-height: var(--line-height-26);
        font-weight: var(--semi-bold);
    }

    .banner .banner-wrapper ul li a:hover{
        color: var(--color-secondary);
    }

    .banner .banner-wrapper ul li a.active {
        color: var(--color-secondary);
    }

    .banner .banner-wrapper ul li:nth-child(2) a::before {
        float: left;
        padding-right: 0.5rem;
        color: var(--color-five);
        content: "/";
    }

/*=====================================
    02. about-services style CSS
    =======================================*/

    .about-services {
        padding-top: 0px;
    }

    .about-services .our-services-wrapper {
        flex-wrap: nowrap;
    }

    .about-services .our-services-wrapper .wc-column-4:nth-child(2){
        margin-left: 40px;
        margin-right: 40px;
    }

    .about-services .our-services-wrapper .our-services-content {
        padding: 30px !important;
        transition: .5s all ease;
         height: 100%;
    }

    .about-services .our-services-wrapper .our-services-content:hover{
        background-color: var(--color-primary);
    }

    .about-services .our-services-wrapper .our-services-content:hover h4{
        color: var(--color-five);
    }

    .about-services .our-services-wrapper .our-services-content:hover p{
        color: var(--color-five);
    }

    .about-services .our-services-wrapper .our-services-content .our-services-icon {
        margin: 0px 0px 22px;
    }

    .about-services .our-services-wrapper .our-services-content:hover .our-services-icon svg path{
        fill: var(--color-primary);
    }

    .about-services .our-services-wrapper .our-services-content:hover .our-services-icon{
        background-color: var(--color-five);
    }

    .about-services .our-services-wrapper .our-services-content h4 {
        text-align: start;
    }

    .about-services .our-services-wrapper .our-services-content p {
        text-align: start;
        margin: 0;
        max-width: 400px;
    }


/*=====================================
    03. about-count style CSS
    =======================================*/

    .about-count .training-two-count-wrapper {
        margin-top: 0px;
    }

    .about-count .training-two-count-wrapper .wc-count h2 {
        color: var(--color-five);
    }

    .about-count .training-two-count-wrapper .wc-count p {
        color: var(--color-five);
    }

    .about-count .training-two-count-wrapper .wc-column-3:nth-child(2) {
        border-color: var(--color-five);
        border-color: var(--color-five);
    }

    .about-count .training-two-count-wrapper .wc-column-3:nth-child(3) {
        border-color: var(--color-five);
    }

/*=====================================
    04. about-newslatter style CSS
    =======================================*/

    .about-newslatter {
        overflow-x: hidden;
    }

    .about-newslatter .about-newslatter-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
    }

    .about-newslatter .about-newslatter-image {
        position: relative;
        overflow: hidden;
        max-width: 670px;
        width: 100%;
    }

    .about-newslatter .about-newslatter-image:before {
        content: "";
        padding-top: 72%;
        display: block;
    }

    .about-newslatter .about-newslatter-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }

    .contact-box {
        background-color: rgba(251, 238, 208, 0.50);
        border: 1px solid var(--color-secondary);
        padding: 45px 40px;
        border-radius: 10px;
    }

    .contact-box h3 {
        font-size: var(--font-size-32);
        line-height: var(--line-height-42);
        text-align: center;
        margin-bottom: 32px;
    }

    .contact-box .contact-box-form .form-group {
        display: flex;
        justify-content: space-between;
        gap: 18px;
    }

    .contact-box .contact-box-form .form-group input,
    .contact-box .contact-box-form .form-group textarea {
        border: 0px;
        padding: 12px 0 12px 20px;
        width: 100%;
        border-radius: 5px;
        font-size: var(--p-16);
        line-height: var(--line-height-26);
        font-family: var(--font-secondary);
        margin-bottom: 8px;
    }
.contact-box .contact-box-form .form-group > div{
    margin-bottom: 14px;
    width: 100%;
} 
.contact-box .contact-box-form .form-group > div .field-error {
    font-family: 'Euclid Circular B';
    font-size: 13px;
    color:#dc3545 !important;
    
}
    .contact-box .contact-box-form .form-group input:focus-visible {
        outline: 1px solid var(--color-secondary);
    }

    .contact-box .contact-box-form .form-group textarea:focus-visible {
        outline: 1px solid var(--color-secondary);
    }

    .contact-box .contact-submit-btn {
        text-align: center;
        margin-top: 10px;
    }

/*=====================================
    05. about-testimonial style CSS
    =======================================*/

    .about-testimonial {
        padding-top: 0px;
    }

/*=====================================
    06. about-footer style CSS
    =======================================*/

    .about-footer {
        padding: 0 !important;
    }

    .about-footer .wc-footer-menu h4 {
        color: var(--color-secondary);
    }

    .about-footer .wc-footer-logo {
        display: unset;
    }

    .about-footer .wc-footer-logo p {
        color: var(--color-five);
        margin-bottom: 34px;
    }

    .about-footer .wc-footer-menu .menu ul li a {
        color: var(--color-five);
    }

    .about-footer .wc-footer-menu .menu ul li a:hover {
        color: var(--color-secondary);
    }

    .about-footer .wc-footer-menu .contact-menu ul li a p {
        color: var(--color-five);
    }

    .about-footer .wc-footer-menu .contact-menu ul li a p:hover {
        color: var(--color-secondary);
    }

    .about-footer .wc-footer-menu .contact-menu ul li a svg path {
        fill: var(--color-five);
    }

    .about-copy {
        background-color: var(--color-third);
    }

    .about-copy .wc-copy p,
    .about-copy .wc-copy a {
        color: var(--color-five);
    }

    .about-copy .wc-social-logo ul li a svg path {
        fill: var(--color-five);
    }

    .about-copy .wc-copy {
        border-top: 0px;
    }


/**************************************
    services-page-one style
    ***************************************/

    .services-two .load-btn {
        text-align: center;
        margin-top: 50px;
    }

    .services-page-one .services-two-content {
        margin-top: 0px !important;
    }

    .services-page-one .services-two-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

/**************************************
    services-page-two style
    ***************************************/

    .services-page-two {
        padding-top: 100px;
    }

    .services-page-two .our-services-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 40px;
        margin-bottom: 50px;
    }

    .services-page-two .our-services-wrapper .our-services-content{
        height: 100%;
        transition: .5s all ease;
    }

    .services-page-two .our-services-wrapper .our-services-content:hover{
        background-color: var(--color-primary);
    }

    .services-page-two .our-services-wrapper .our-services-content:hover .our-services-icon{
        background-color: var(--color-five);
    }

    .services-page-two .our-services-wrapper .our-services-content:hover .our-services-icon svg path{
        fill: var(--color-primary);
    }

    .services-page-two .our-services-wrapper .our-services-content:hover h4{
        color: var(--color-five);
    }

    .services-page-two .our-services-wrapper .our-services-content:hover p{
        color: var(--color-five);
    }

/**************************************
    services-detail-one style
    ***************************************/

    .services-detail-one {
        max-width: 1260px;
        margin: 0 auto;
    }

    .services-detail-one .growth-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
    }

    .services-detail-one .growth-wrapper .image-slider-wrapper {
        width: 50%;
        position: relative;
    }

    .services-detail-one .growth-wrapper .image-slider-wrapper .image-slider {
        padding-right: 33px;
    }

    .services-detail-one .growth-wrapper .image-slider-wrapper .image-slider:before {
        padding-top: 118%;
    }

    .services-detail-one .growth-wrapper .image-slider-wrapper .image-slider img {
        border-top-right-radius: 80px;
        border-bottom-left-radius: 80px;
    }

    .services-detail-one .growth-wrapper .growth-content {
        padding-left: 66px;
        position: relative;
        z-index: -1;
    }

    .services-detail-one .growth-wrapper .growth-content h2 {
        max-width: 650px;
        margin-bottom: 22px;
    }

    .services-detail-one .growth-wrapper .growth-content p {
        max-width: 650px;
    }

    .services-detail-one .growth-wrapper .growth-content .growth-para-one {
        margin-bottom: 28px;
    }

    .services-detail-one .growth-wrapper .growth-content ul {
            margin: 20px 25px;
    }

    .services-detail-one .growth-wrapper .growth-content ul li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 13px;
        font-family: var(--font-secondary);
        color: var(--color-four);
    }

    .services-detail-one .growth-wrapper .growth-content ul li:before {
        content: url(../images/growth-mark.png);
        position: absolute;
        top: 0;
        left: 0;
    }

    .services-detail-one .purpose-content h3 {
        margin-bottom: 15px;
    }

    .services-detail-one .purpose-content p {
        margin-bottom: 40px;
    }

    .services-detail-one .purpose-content .purpose-wrapper {
        display: flex;
        flex-wrap: wrap;
        padding: 0 50px;
    }

    .services-detail-one .purpose-content .purpose-wrapper .purpose-inner {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 38px;
        width: 50%;
        padding: 0 50px;
    }

    .services-detail-one .purpose-content .purpose-wrapper .purpose-inner .purpose-inner-icon {
        height: 80px;
        min-width: 80px;
        background-color: var(--color-secondary);
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .services-detail-one .purpose-content .purpose-wrapper .purpose-inner .purpose-inner-icon svg path{
        stroke: var(--color-primary);
        fill: transparent;
    }

    .services-detail-one .purpose-content .purpose-wrapper .purpose-inner .purpose-inner-text {
        width: 100%;
    }

    .services-detail-one .purpose-content .purpose-wrapper .purpose-inner .purpose-inner-text p {
        margin-bottom: 0;
        margin-top: 6px;
        max-width: 395px;
    }

    .services-detail-one .support-content h3 {
        margin-bottom: 16px;
    }

    .services-detail-one .support-content p {
        margin-bottom: 30px;
    }

    .services-detail-one .Support-wrapper  {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 58px;
    }

    .services-detail-one .Support-wrapper .support-icon-content{
        border-radius: 15px;
        padding: 38px 30px;
    }

    .services-detail-one .Support-wrapper .support-icon-content .services-icon {
        height: 80px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        margin: 0 auto 25px;
        background-color: var(--color-five);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    }

    .services-detail-one .Support-wrapper .support-icon-content h4 {
        text-align: center;
        margin-top: 24px;
    }

    .services-detail-one  .Support-wrapper .support-icon-content p {
        max-width: 400px;
        margin: 15px auto 0;
        text-align: center;
    }

    .services-detail-one  .Support-wrapper  .support-para p {
        max-width: 729px;
    }

    .services-detail-one .services-detail-one-image-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 16px;
        background: rgba(255, 188, 104, 0.50);
        border-radius: 15px;
        padding: 20px;
        margin-top: 38px;
    }

    .services-detail-one .services-detail-one-image-grid .image::before {
        padding-top: 68%;
    }

/**************************************
    services-detail-one-option style
    ***************************************/

    .services-finibus-one {
        padding-bottom: 0px !important;
    }

    .services-finibus-one::before {
        width: 100% !important;
    }

    .services-finibus-one .back-image {
        width: 100% !important;
    }

    .services-finibus-one .services-finibus-wrapper {
        justify-content: center !important;
    }

    .services-finibus-one .services-finibus-right .Finibus-update {
        justify-content: center !important;
        border-radius: 45px !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

    .services-finibus-one .services-finibus-right {
        text-align: center;
        padding-left: 0px!important;
    }

    .services-finibus-one .services-finibus-right h2 {
        max-width: 635px;
        width: 100%;
    }

    .services-finibus-one .services-finibus-right .Finibus-update .Finibus-update-text p {
        text-align: start;
    }

    .services-skill {
        padding-top: 0px;
    }

    .services-skill .services-skill-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 40px;
        text-align: center;
    }

    .services-skill .services-skill-wrapper .services-skill-box {
        border: 1px solid #FFC700;
        border-radius: 10px;
        background-color: var(--color-dark);
        padding: 0 30px 30px 30px;
    }

    .services-skill .services-skill-wrapper .services-skill-box .skill-icon {
        height: 80px;
        width: 80px;
        background-color: var(--color-secondary);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        margin: -40px auto 22px;
    }

    .services-skill .services-skill-wrapper .services-skill-box .skill-icon svg path{
        stroke: var(--color-primary);
        fill: transparent;
    }

    .services-skill .services-skill-wrapper .services-skill-box h5 {
        margin-bottom: 14px;
    }

    .purpose-one{
        padding-top: 30px;
    }

    .purpose-one .purpose-para h4,
    .purpose-one .purpose-para p {
        margin-bottom: 15px;
    }

    .denounce {
        padding-top: 54px;
    }

    .denounce .denounce-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .denounce .denounce-wrapper .denounce-left-content,
    .denounce .denounce-wrapper .denounce-right-content {
        width: 50%;
    }

    .denounce .denounce-wrapper .denounce-left-content {
        padding-right: 23px;
    }

    .denounce .denounce-wrapper .denounce-right-content {
        padding-left: 23px;
    }

    .denounce .denounce-wrapper .denounce-left-content .denounce-image {
        display: flex;
        align-items: center;
    }

    .denounce .denounce-wrapper .denounce-left-content h3 {
        max-width: 588px;
        margin-bottom: 40px;
    }

    .denounce .denounce-wrapper .denounce-left-content .denounce-image img {
        max-width: 250px;
        padding-right: 8px;
    }

    .denounce .denounce-wrapper .denounce-left-content .denounce-image p {
        max-width: 330px;
        padding-left: 8px;
    }

    .denounce .denounce-wrapper .denounce-right-content .faq-wrapper {
        margin-top: 0px;
    }

/**************************************
    services-detail-two style
    ***************************************/

    .services-detail-two .services-detail-image-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .services-detail-two .services-detail-image-box .services-detail-left h2 {
        max-width: 662px;
        margin-bottom: 20px;
    }

    .services-detail-two .services-detail-image-box .services-detail-left p {
        max-width: 662px;
        margin-bottom: 30px;
    }

    .services-detail-two .services-detail-image-box .services-detail-left ul li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 13px;
        font-family: var(--font-secondary);
        color: var(--color-four);
    }

    .services-detail-two .services-detail-image-box .services-detail-left ul {
        margin-bottom: 38px;
    }

    .services-detail-two .services-detail-image-box .services-detail-left ul li::before {
        content: url(../images/growth-mark.png);
        position: absolute;
        top: 0;
        left: 0;
    }

    .services-detail-two .services-detail-image-box .services-detail-right {
        columns: 2;
        gap: 30px;
        max-width: 50%;
        width: 100%;
    }
    .services-detail-two .services-detail-image-box .services-detail-right img{
        border-radius: 20px;
    }

    .services-detail-two .services-detail-image-box .services-detail-right .image {
        margin-top: 30px;
        position: relative;
    }

    .services-detail-two .services-detail-image-box .services-detail-right .image .blog-date {
        background-color: var(--color-secondary);
        font-weight: var(--semi-bold);
        font-size: 12px;
        line-height: 22px;
        max-width: 98px;
        padding: 4px 12px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        color: var(--color-six);
        position: absolute;
        top: 0;
        right: 16px;
        font-family: var(--font-secondary);
    }

    .services-intructions {
        padding-top: 0px;
    }

    .services-intructions .wc-row {
        justify-content: center;
    }

    .services-intructions .intructions-nub {
        text-align: center;
    }

    .services-intructions .intructions-nub span {
        background-color: var(--color-secondary);
        height: 58px;
        width: 58px;
        padding: 13px 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        color: var(--color-primary);
        font-family: var(--font-secondary);
        font-size: var(--h4-22);
        line-height: var(--line-height-32);
        font-weight: var(--semi-bold);
        margin: 0 auto 15px;
    }

    .services-intructions .intructions-nub h4 {
        max-width: 183px;
        margin: 0 auto 10px;
    }

    .services-intructions .intructions-nub p {
        max-width: 308px;
        margin: 0 auto;
    }

    .services-finibus {
        position: relative;
    }

    .services-finibus:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 9;
        width: 60%;
        background: rgba(1, 69, 44, 0.50);
    }

    .services-finibus .back-image {
        position: absolute;
        top: 0;
        right: 0;
        width: 60%;
        height: 100%;
        object-fit: cover;
    }

    .services-finibus .services-finibus-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .services-finibus .services-finibus-left .finibus-nub {
        margin-bottom: 56px;
    }

    .services-finibus .services-finibus-left .finibus-nub span {
        background-color: var(--color-primary);
        height: 46px;
        width: 46px;
        padding: 7px 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        color: var(--color-five);
        font-family: var(--font-secondary);
        font-size: var(--h4-22);
        line-height: var(--line-height-32);
        font-weight: var(--semi-bold);
        margin-bottom: 15px;
    }

    .services-finibus .services-finibus-left .finibus-nub p {
        max-width: 390px;
        margin-bottom: 12px;
    }

    .services-finibus .services-finibus-right {
        position: relative;
        z-index: 9;
        padding-left: 170px;
    }

    .services-finibus .services-finibus-left{
        padding-right: 170px;
    }

    .services-finibus .services-finibus-right h2 {
        color: var(--color-five);
    }

    .services-finibus .services-finibus-right .services-finibus-btn {
        margin-bottom: 50px;
        margin-top: 36px;
    }

    .services-finibus .services-finibus-right .services-finibus-btn .btn-primary {
        background-color: var(--color-five);
        color: var(--color-primary);
    }

    .services-finibus .services-finibus-right .Finibus-update {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: var(--color-dark);
        border-radius: 15px;
        padding: 24px 33px;
    }

    .services-finibus .services-finibus-right .Finibus-update .Finibus-update-text p {
        max-width: 332px;
        font-size: var(--h6-18);
        line-height: var(--line-height-32);
        color: var(--color-third);
        font-weight: var(--semi-bold);
        padding-left: 30px;
    }

    .services-finibus .services-finibus-right .Finibus-update .Finibus-update-text p a{
        font-size: var(--h6-18);
        line-height: var(--line-height-32);
        color: var(--color-third);
        font-weight: var(--semi-bold);
    }

    .services-finibus .services-finibus-right .Finibus-update .Finibus-update-text p a:hover{
        color: var(--color-primary);
    }

    .services-challenge .services-challenge-head h3 {
        margin-bottom: 15px;
    }

    .services-challenge .services-challenge-head p {
        margin-bottom: 35px;
        margin-top: 0px;
    }

    .services-challenge .services-challenge-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 35px;
    }

    .services-challenge .services-challenge-wrapper .challenge-image {
        max-width: 550px;
        width: 100%;
        position: relative;
        padding-right: 40px;
    }

    .services-challenge .services-challenge-wrapper .challenge-image .image-inner {
        max-width: 316px;
        width: 100%;
        position: absolute;
        right: -85px;
        bottom: -55px;
    }

    .services-challenge .services-challenge-wrapper .services-challenge-working {
        max-width: 660px;
        width: 100%;
        padding-left: 40px;
    }

    .services-challenge .services-challenge-wrapper .services-challenge-working h2 {
        margin-bottom: 22px;
    }

    .services-challenge .services-challenge-wrapper .services-challenge-working p {
        margin-bottom: 25px;
        margin-top: 0px;
    }

    .services-challenge .services-challenge-wrapper .services-challenge-working .working-list {
        display: flex;
        gap: 60px;
        margin-bottom: 35px;
    }

    .services-challenge .services-challenge-wrapper .services-challenge-working .working-list ul li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 13px;
        font-family: var(--font-secondary);
        color: var(--color-four);
    }

    .services-challenge .services-challenge-wrapper .services-challenge-working .working-list ul li::before {
        content: url(../images/growth-mark.png);
        position: absolute;
        top: 0;
        left: 0;
    }

    .services-challenge p {
        margin-top: 70px;
    }


.services-detail-one .Support-wrapper .support-icon-content .services-icon svg {
    width: 28px;
    height: 28px;
}


/**************************************
    services-detail-three style
    ***************************************/

    .services-detail-three .services-detail-three-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-left {
        width: 70%;
        padding-right: 23px;
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-left .services-image-top:before {
        padding-top: 52%;
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-left h3 {
        font-size: 36px;
        line-height: 46px;
        max-width: 950px;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .services-detail-three .services-detail-three-left .services-link-wrapper-category {
     background-color: transparent !important;
    border-bottom: 1px solid #dcdcdc;
    border-radius: 0 !important;
}

.services-detail-three .services-detail-three-left .services-link-wrapper-category a.link {
    background-color: #fbeed0 !important;
}

    .services-detail-three .services-detail-three-wrapper .services-detail-three-left p {
        margin-bottom: 15px;
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-left .services-detail-three-image-slider {
        margin-top: 35px;
        margin-bottom: 70px;
        position: relative;
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-left .services-detail-three-image-slider .wc-image-slider::before {
        padding-top: 63%;
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-left .services-detail-three-image-slider .swiper-pagination {
        bottom: -30px;
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        background-color: var(--color-dark);
        align-items: center;
        padding: 10px 18px;
        border-radius: 5px;
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper .hyperlink {
        display: flex;
        align-items: center;
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper .hyperlink .link {
        background-color: var(--color-five);
        height: 38px;
        width: 38px;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--color-third);
        margin-right: 20px;
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper .hyperlink .link:hover{
        background-color: var(--color-secondary);
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper .hyperlink .link svg path {
        fill: var(--color-third);
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper .hyperlink ul {
        display: flex;
        list-style: unset;
        margin-left: 20px;
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper .hyperlink ul li a {
        color: var(--color-third);
        padding-right: 40px;
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper .hyperlink ul li a:hover{
        color: var(--color-primary);
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper .wc-social-logo ul {
        display: flex;
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper .wc-social-logo ul li a{
        padding-right: 7px;
        padding-left: 7px;
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper .wc-social-logo ul li a svg path {
        fill: var(--color-third);
    }

    .services-detail-three .services-detail-three-left .services-link-wrapper .wc-social-logo ul li a:hover svg path{
        fill: var(--color-primary);
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-right {
        padding-left: 23px;
        width: 30%;
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-right .all-services {
        background-color: var(--color-dark);
        padding: 35px 30px;
        border-radius: 10px;
        margin-bottom: 25px;
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-right .all-services .all-services-categories ul {
        margin-top: 20px;
        border-top: 1px solid var(--color-secondary);
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-right .all-services .all-services-categories ul li {
        font-family: var(--font-secondary);
        border-bottom: 1px solid var(--color-secondary);
        padding: 12px 0 12px 35px;
        position: relative;
        font-weight: var(--medium);
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-right .all-services .all-services-categories ul li a{
        display: flex;
        justify-content: space-between;
        color: var(--color-third);
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-right .all-services .all-services-categories ul li a:hover{
        color: var(--color-primary);
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-right .all-services .all-services-categories ul li::before {
        content: url(../images/growth-mark.png);
        position: absolute;
        top: 12px;
        left: 0;
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-right .Brochures {
        background-color: var(--color-dark);
        padding: 35px 30px;
        border-radius: 10px;
    }

    .services-detail-three .services-detail-three-wrapper .services-detail-three-right .Brochures p {
        margin-top: 15px;
        margin-bottom: 28px;
    }
    .all-services-categories {
    margin-top: 15px;
}

.all-services-categories .recent-blog-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #68686833;
}

.all-services-categories .recent-blog-info svg {
    width: 18px;
    height: 18px;
}

.all-services-categories .recent-blog-info:last-child {
    margin: 0;
    border-bottom: 0;
    padding: 0;
}


/**************************************
    team-page-popup style
    ***************************************/

    .mfp-bg {
        background: rgba(1, 69, 44, 0.60);
    }

    .team-popup {
        position: relative;
        max-width: 886px;
        width: 100%;
        margin: 0 auto;
    }

    .team-popup .team-info {
        display: flex;
        justify-content: center;
        padding: 20px;
        border-radius: 10px;
        background-color: var(--color-five);
    }

    .team-popup .team-info .team-info-image {
        width: 50%;
        padding-right: 17px;
    }

    .team-popup .team-info .team-info-content {
        width: 50%;
        padding-left: 17px;
    }

    .team-popup .team-info .team-info-content h3 {
        margin-bottom: 12px;
    }

    .team-popup .team-info .team-info-content p {
        margin-bottom: 12px;
    }

    .team-popup .team-info .team-info-content .team-personal-info ul li a {
        display: flex;
        gap: 26px;
        align-items: center;
        margin-bottom: 22px;
    }

    .team-popup .team-info .team-info-content .team-personal-info ul li a span {
        background-color: var(--color-primary);
        height: 38px;
        min-width: 38px;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .team-popup .team-info .team-info-content .team-personal-info ul li a p {
        margin-bottom: 0px;
    }

    .team-popup .team-info .team-info-content .team-personal-info ul li a p:hover{
        color: var(--color-primary);
    }

    .team-popup .team-info .team-info-content .team-personal-info ul li a span svg path {
        fill: var(--color-five);
    }

    .team-page .wc-team-image-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 30px;
    }

    .team-page .wc-team-image-wrapper .team-image {
        padding-bottom: 10px;
    }
    .team-page .wc-team-image-wrapper.team-image-wrapper-page {
    display: block;
}
.team-page .wc-team-image-wrapper.team-image-wrapper-page .grid_append{
    display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 30px;
}

    .team-page .load-btn {
        margin-top: 50px;
    }

/**************************************
    team-detail style
    ***************************************/

    .team-detail .team-detail-wrapper {
        max-width: 1258px;
        width: 100%;
        margin: 0 auto;
    }

    .team-detail .team-detail-wrapper .team-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 38px;
    }

    .team-detail .team-detail-wrapper .team-info .team-info-image {
        width: 50%;
        padding-right: 25px;
    }

    .team-detail .team-detail-wrapper .team-info .team-info-content {
        padding-left: 25px;
        width: 50%;
    }

    .team-detail .team-detail-wrapper .team-info .team-info-content h2 {
        margin-bottom: 12px;
    }

    .team-detail .team-detail-wrapper .team-info .team-info-content p {
        margin-bottom: 12px;
    }

    .team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info {
        margin-top: 40px;
    }

    .team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li a {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
    }

    .team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li a span {
        background-color: var(--color-primary);
        height: 38px;
        width: 38px;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 13px;
    }

    .team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li a p {
        margin-bottom: 0px;
        max-width: 226px;
        margin-left: 13px;
    }

    .team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li a p:hover{
        color: var(--color-primary);
    }

    .team-detail .team-detail-wrapper .team-info .team-info-content .team-personal-info ul li a span svg path {
        fill: var(--color-five);
    }

    .team-detail .team-detail-wrapper .team-info-content h2 {
        margin-bottom: 18px;
    }

    .team-detail .team-detail-wrapper .team-info-education {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgba(255, 188, 104, 0.50);
        border-radius: 25px;
        padding: 20px;
        margin: 28px 0;
    }

    .team-detail .team-detail-wrapper .team-info-education .team-info-interest {
        padding-left: 55px;
    }

    .team-detail .team-detail-wrapper .team-info-education .team-info-interest ul {
        margin-top: 15px;
        list-style: unset;
    }

    .team-detail .team-detail-wrapper .team-info-education .team-info-interest ul li {
        color: var(--color-four);
        font-family: var(--font-secondary);
        margin-bottom: 7px;
        font-size: var(--p-16);
        line-height: var(--line-height-26);
    }

    .team-detail .team-detail-wrapper .team-info-education .education ul {
        margin-top: 15px;
        list-style: unset;
    }

    .team-detail .team-detail-wrapper .team-info-education .education ul li {
        color: var(--color-third);
        font-family: var(--font-secondary);
        margin-bottom: 12px;
        font-size: var(--h6-18);
        line-height: var(--line-height-28);
        font-weight: var(--medium);
    }

    .team-detail .team-detail-wrapper .team-info-education .education ul li P {
        margin-top: 7PX;
    }

    .team-detail .team-detail-wrapper .team-info-skill h2 {
        margin-bottom: 18px;
        margin-top: 10px;
    }

    .team-detail .team-detail-wrapper .team-info-skill .progressbar-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40px;
    }

    .team-detail .team-detail-wrapper .team-info-skill .progressbar-title h4 {
        margin-bottom: 10px;
    }

    .team-detail .team-detail-wrapper .team-info-skill .progress {
        background-color: rgba(255, 188, 104, 0.50);
        width: 100%;
        border-radius: 4px;
        margin-bottom: 25px;
    }

    .team-detail .team-detail-wrapper .team-info-skill .progress h6 {
        color: var(--color-primary);
        font-weight: var(--semi-bold);
    }

    .team-detail .team-detail-wrapper .team-info-skill .bar {
        border-radius: 3px;
        color: white;
        text-align: center;
    }

    .team-detail .team-detail-wrapper .team-info-skill .bar.experience {
        background: var(--color-secondary);
        width: 70%;
    }

    .team-detail .team-detail-wrapper .team-info-skill .bar.financial {
        background: var(--color-secondary);
        width: 90%;
    }

    .team-detail .team-detail-wrapper .team-info-skill .bar.consulting {
        background: var(--color-secondary);
        width: 60%;
    }

    .team-detail .team-detail-wrapper .team-info-skill .bar.business {
        background: var(--color-secondary);
        width: 80%;
    }

    .team-detail .team-detail-wrapper .progressbar-wrapper .progressbar {
        width: 100%;
    }

    .team-detail .team-detail-wrapper .progressbar-wrapper .progressbar-para {
        width: 50%;
        padding-left: 32px;
    }

    .team-detail .team-detail-wrapper .progressbar-wrapper .progressbar-para p {
        margin-bottom: 15px;
    }

/**************************************
   portfolio-grid style
   ***************************************/

   .portfolio-grid .portfolio-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 28px;
   }

   .portfolio-grid .portfolio-grid-wrapper .portfolio-image {
    position: relative;
    overflow: hidden;
    max-width: 468px;
    width: 100%;
    display: block;
   }


   .portfolio-grid .portfolio-grid-wrapper .portfolio-image::before {
    padding-top: 80%;
    display: block;
    content: '';
   }

   .portfolio-grid .portfolio-grid-wrapper .portfolio-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    background-color: rgba(1, 69, 44, 0.60);
    height: 100%;
    width: 100%;
    border-radius: 10px;
    transition: .5s all;
   }

   .portfolio-grid .portfolio-grid-wrapper .portfolio-image:hover::after {
    left: 0%;
   }

   .portfolio-grid .portfolio-grid-wrapper .portfolio-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
   }

   .portfolio-grid .portfolio-grid-wrapper .portfolio-image .portfolio-design {
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--color-secondary);
    padding: 15px 10px;
    width: calc(100% - 136px);
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 9;
    transition: .5S all;
   }

   .portfolio-grid .portfolio-grid-wrapper .portfolio-image:hover .portfolio-design {
    bottom: 0;

   }

   .portfolio-grid .portfolio-grid-wrapper .portfolio-image .portfolio-design h4 {
    font-weight: var(--semi-bold);
   }

   .portfolio-grid .portfolio-grid-wrapper .portfolio-image .portfolio-design h4 svg {
    vertical-align: middle;
    margin-left: 6px;
   }

   .portfolio-grid .load-btn {
    margin-top: 60px;
   }


/**************************************
   portfolio-masonary style
   ***************************************/

   .portfolio-masonary .grid:after {
    content: '';
    display: block;
    clear: both;
   }

   .portfolio-masonary .grid-sizer,
   .portfolio-masonary .grid-item {
    width: calc(25% - 24px);
    margin-bottom: 24px;
   }

   .portfolio-masonary .grid-item {
    float: left;
    position: relative;
    overflow: hidden;
   }

   .portfolio-masonary .grid-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(1, 69, 44, 0.60);
    height: 100%;
    width: 100%;
    border-radius: 10px;
    transition: .5s all;
    opacity: 0;
   }

   .portfolio-masonary .grid-item:hover::after {
    opacity: 1;
   }

   .portfolio-masonary .grid-item img {
    display: block;
    max-width: 100%;
   }

   .portfolio-masonary .grid-item .portfolio-design {
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--color-secondary);
    padding: 15px 10px;
    width: 100%;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 9;
    transition: .5S all;
    opacity: 0;
    visibility: hidden;

   }

   .portfolio-masonary .grid-item:hover .portfolio-design {
    bottom: 0;
    opacity: 1;
    visibility: visible;
   }

   .portfolio-masonary .grid-item .portfolio-design h4 svg {
    vertical-align: middle;
    margin-left: 6px;
   }

/**************************************
   portfolio-slider style
   ***************************************/

   .Portfolio-Slider .Portfolio-Slider-wrapper {
    display: block;
    position: relative;
   }

   .Portfolio-Slider .Portfolio-Slider-wrapper .swiper-pagination {
    bottom: -50px;
   }

/**************************************
   portfolio-detail style
   ***************************************/

   .portfolio-detail .portfolio-detail-wrapper {
    display: flex;
    justify-content: space-between;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-left {
    width: 70%;
    padding-right: 30px;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-right {
    width: 30%;
    padding-left: 30px;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-left .detail-iamge {
    margin-bottom: 28px;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-left .detail-iamge:before {
    padding-top: 48%;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-left p {
    margin-bottom: 15px;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-left .detail-inner-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 30px;
        gap: 10px;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-left .detail-inner-wrapper .detail-inner-para {
    width: 50%;
    margin-left: 53px;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-right .detail-right-box {
    background-color: var(--color-dark);
    border-radius: 10px;
    padding: 35px;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-right .detail-right-box .portfolio-detail-content {
    margin-bottom: 25px;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-right .detail-right-box .portfolio-detail-content h5 {
    margin-bottom: 12px;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-right .detail-right-box .portfolio-detail-content .wc-social-logo ul {
    display: flex;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-right .detail-right-box .portfolio-detail-content .wc-social-logo ul li a {
    padding-right: 15px;
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-right .detail-right-box .portfolio-detail-content .wc-social-logo ul li a:hover svg path {
    fill: var(--color-primary);
   }

   .portfolio-detail .portfolio-detail-wrapper .portfolio-detail-right .detail-right-box .portfolio-detail-content .wc-social-logo ul li a svg path {
    fill: var(--color-four);
   }

   .portfolio-detail .portfolio-detail-slider {
    margin-top: 57px;
   }

   .portfolio-detail .portfolio-detail-slider h2 {
    margin-bottom: 40px;
   }


/**************************************
   blog-grid style
   ***************************************/

   .blog-grid .blog-head-wrapper .blog-head-title h2 {
    margin-bottom: 15px;
   }

   .blog-grid .blog-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
   }
   .blog-page-one .blog-wrapper {
    display: block;
}
.blog-page-one .blog-wrapper .grid_append{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
}

/**************************************
   blog-grid style
   ***************************************/

   .blog-list .blog-two-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
   }

   .blog-list .blog-two-wrapper .blog-right-inner {
    margin-left: 0px;
    margin-bottom: 0px;
   }

/*=====================================
    blog-classic style
    =======================================*/

    .blog-classic .blog-classic-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .blog-classic .blog-classic-wrapper .blog-classic-left {
        width: 70%;
        padding-right: 28px;
    }

    .blog-classic .blog-classic-wrapper .blog-classic-right {
        width: 30%;
        padding-left: 28px;
    }

    .blog-classic .blog-two-wrapper {
        display: unset !important;
    }

    .blog-classic .blog-classic-left .blog-content {
        margin-right: 0px;
        margin-bottom: 28px;
    }

    .blog-classic .blog-classic-left .blog-content .blog-content-image {
        max-width: 100%;
    }

    .blog-classic .blog-classic-left .blog-content p {
        max-width: 100%;
    }

    .blog-classic .blog-classic-left .blog-content h4 {
        font-size: var(--h3-28);
        line-height: var(--line-height-38);
        font-weight: var(--semi-bold);
    }

    .blog-classic .blog-two-wrapper .blog-two-btn {
        border-bottom: 1px solid var(--color-dark);
        padding-bottom: 30px;
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-left {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-left img {
        max-width: 40px;
        height: 40px;
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-left p {
        margin-bottom: 0;
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-left .name {
        color: var(--color-secondary);
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-left .date li {
        color: var(--color-third);
        font-weight: var(--medium);
        position: relative;
        list-style-type: disc;
        font-family: var(--font-secondary);
        margin-left: 20px;
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-right {
        display: flex;
        align-items: center;
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-right .like{
        padding-right: 16px;
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-right .share{
        padding-left: 16px;
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-right span {
        font-size: var(--p-16);
        line-height: var(--line-height-26);
        font-family: var(--font-secondary);
        margin-left: 8px;
        vertical-align: top;
        font-weight: var(--medium);
        color: var(--color-third);
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-right svg path {
        fill: var(--color-third);
    }

    .blog-classic .blog-two-wrapper .classic-blog-bottom .classic-blog-bottom-right a:hover svg path{
        fill: var(--color-secondary);
    }

    .blog-classic .blog-classic-right .search-here .classic-search {
        max-width: 454px;
        width: 100%;
        position: relative;
        height: 50px;
        margin-top: 15px;
    }

    .blog-classic .blog-classic-right .search-here .classic-search input {
        width: 100%;
        height: 100%;
        border: 0px;
        background-color: var(--color-dark);
        padding: 11px 80px 11px 25px;
        border-radius: 4px;
        font-size: var(--p-16);
        line-height: var(--line-height-26);
    }

    .blog-classic .blog-classic-right .search-here .classic-search .search-btn {
        height: 50px;
        width: 74px;
        background-color: var(--color-secondary);
        border: none;
        border-radius: 4px;
        position: absolute;
        right: 0;
        top: 0;
        border: 1px solid var(--color-secondary);
        transition: .2s all ease;
    }

    .blog-classic .blog-classic-right .search-here .classic-search .search-btn:hover{
        background-color: var(--color-five);
    }

    .blog-classic .blog-classic-right .search-here .classic-search .search-btn svg path {
        fill: unset;
    }

    .blog-classic .blog-classic-right .Recent-blogs {
        margin-top: 38px;
    }

    .blog-classic .blog-classic-right .Recent-blogs .recent-blog-content {
        display: flex;
        align-items: flex-start;
        margin-top: 20px;
        gap: 15px;
    }

    .blog-classic .blog-classic-right .Recent-blogs .recent-blog-content .recent-image {
        max-width: 120px;
        width: 100%;
    }

    .blog-classic .blog-classic-right .Recent-blogs .recent-blog-content .recent-image img {
        border-radius: 5px;
    }

    .blog-classic .blog-classic-right .Recent-blogs .recent-blog-content .recent-image::before {
        padding-top: 75%;
    }

    .blog-classic .blog-classic-right .Recent-blogs .recent-blog-content .recent-blog-info h6 {
        max-width: 314px;
        width: 100%;
        margin-bottom: 10px;
    }

    .blog-classic .blog-classic-right .Recent-blogs .recent-blog-content .recent-blog-info .comment {
        display: flex;
        align-items: center;
    }

    .blog-classic .blog-classic-right .Recent-blogs .recent-blog-content .recent-blog-info .comment svg {
        vertical-align: bottom;
        margin-right: 8px;
    }

    .blog-classic .blog-classic-right .Recent-blogs .recent-blog-content .recent-blog-info .comment svg path {
        fill: var(--color-four);
    }

    .blog-classic .blog-classic-right .archives {
        margin-top: 38px;
    }

    .blog-classic .blog-classic-right .archives .archive-content {
        background-color: var(--color-dark);
        padding: 30px 38px;
        border-radius: 4px;
        margin-top: 20px;
    }

    .blog-classic .blog-classic-right .archives .archive-content ul {
        list-style: unset;
    }

    .blog-classic .blog-classic-right .archives .archive-content ul li {

    }

    .blog-classic .blog-classic-right .archives .archive-content ul li a{
        font-size: var(--h6-18);
        line-height: var(--line-height-28);
        font-weight: var(--medium);
        font-family: var(--font-secondary);
        margin-bottom: 15px;
        color: var(--color-third);
        display: block;
    }

    .blog-classic .blog-classic-right .archives .archive-content ul li a:hover{
        color: var(--color-primary);
    }

    .blog-classic .categories{
        margin-top: 38px;
    }

    .blog-classic .categories .categories-select-dropdown {
        position: relative;
        display: inline-block;
        max-width: 454px;
        width: 100%;
        height: 50px;
        margin-top: 20px;
    }
    .blog-classic .categories .select-dropdown-button {
        background-color: var(--color-dark);
        color: #616161;
        border-radius: 3px;
        cursor: pointer;
        width: 100%;
        height: 100%;
        text-align: left;
        border: 0px;
        padding-left: 25px;
    }
    .blog-classic .categories .select-dropdown-button::focus {
        outline: none;
    }

    .blog-classic .categories .select-dropdown-button span{
        font-size: var(--p-16);
        line-height: var(--line-height-26);
        font-family: var(--font-secondary);
    }

    .blog-classic .categories .select-dropdown-button .fa-angle-down {
        position: absolute;
        right: 25px;
        top: 17px;
    }
    .blog-classic .categories .select-dropdown-list {
        position: absolute;
        display: block;
        left: 0;
        right: 0;
        max-height: 300px;
        overflow: auto;
        margin: 0;
        padding: 0;
        list-style-type: none;
        opacity: 0;
        pointer-events: none;
        transform-origin: top left;
        transform: scale(1, 0);
        transition: all ease-in-out 0.3s;
        z-index: 2;
    }
    .blog-classic .categories .select-dropdown-list.active {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1, 1);
    }
    .blog-classic .categories .select-dropdown-list-item {
        display: block;
        list-style-type: none;
        padding: 10px 15px;
        background: var(--color-dark);
        border-top: 1px solid var(--color-secondary);
        font-size: 14px;
        line-height: 1.4;
        cursor: pointer;
        color: #616161;
        transition: all ease-in-out 0.3s;
        font-family:  var(--font-secondary);
    }

    .blog-classic .blog-classic-right .instagram-post {
        margin-top: 38px;
    }

    .blog-classic .blog-classic-right .instagram-post .instagram-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 8px;
        margin-top: 20px;
        max-width: 454px;
    }

    .blog-classic .blog-classic-right .instagram-post .instagram-grid .insta-image {
        max-width: 146px;
        width: 100%;
    }

    .blog-classic .blog-classic-right .instagram-post .instagram-grid .insta-image img {
        border-radius: 5px;
    }

    .blog-classic .blog-classic-right .instagram-post .instagram-grid .insta-image::before {
        padding-top: 77%;
    }

    .blog-classic .blog-classic-right .popular-tags {
        margin-top: 38px;
    }

    .blog-classic .blog-classic-right .popular-tags .popular-tag-wrapper {
        margin-top: 20px;
    }

    .blog-classic .blog-classic-right .popular-tags .popular-tag-wrapper ul {
        display: flex;
        flex-wrap: wrap;
    }

    .blog-classic .blog-classic-right .popular-tags .popular-tag-wrapper ul li a {
        border: 1px solid var(--color-secondary);
        border-radius: 4px;
        padding: 6px 16px;
        font-size: var(--p-16);
        line-height: var(--line-height-26);
        color: var(--color-six);
        font-weight: var(--regular);
        display: inline-block;
        margin-right: 12px;
        margin-bottom: 12px;
    }

    .blog-classic .blog-classic-right .popular-tags .popular-tag-wrapper ul li a:hover{
        background-color: var(--color-secondary);
    }

/*=====================================
    blog-detail style
    =======================================*/

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .blog-detail-image::before {
        padding-top: 34%;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .blog-detail-image img {
        border-radius: 10px;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar {
        display: flex;
        justify-content: space-between;
        margin-top: 25px;
            margin-bottom: 20px;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-left {
        display: flex;
        align-items: center;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-left img {
        max-width: 40px;
        height: 40px;
        margin-right: 15px;
            border-radius: 50%;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-left .name {
        color: var(--color-secondary);
        margin-right: 15px;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-left p {
        margin-bottom: 0;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-left .date li {
        color: var(--color-third);
        font-weight: var(--medium);
        position: relative;
        list-style-type: disc;
        font-family: var(--font-secondary);
        margin-left: 20px;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right {
        display: flex;
        align-items: center;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right .like{
        padding-right: 16px;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right .share{
        padding-left: 16px;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right span {
        font-size: var(--p-16);
        line-height: var(--line-height-26);
        font-family: var(--font-secondary);
        margin-left: 8px;
        vertical-align: top;
        font-weight: var(--medium);
        color: var(--color-third);
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right svg path {
        fill: var(--color-third);
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content .image-bottom-bar .image-bottom-bar-right a:hover svg path{
        fill: var(--color-secondary);
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-image-content h3 {
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .blog-detail-one .blog-detail-wrapper p {
        margin-bottom: 15px;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-quotes {
        border: 1px solid var(--color-dark);
        border-radius: 16px;
        padding: 10px;
        margin-top: 60px;
        margin-bottom: 30px;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-quotes .quotes-inner {
    background-color: var(--color-dark);
    border-radius: 16px;
    padding: 10PX;
    font-weight: var(--medium);
    text-align: center;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 30px;
    padding-top: 10px;
    font-size: var(--h4-22);
    line-height: var(--line-height-32);
    font-family: var(--font-primary);
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-quotes .quotes-inner h4 {
        font-weight: var(--medium);
        text-align: center;
        padding-left: 100px;
        padding-right: 100px;
        padding-bottom: 30px;
        padding-top: 10px;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-quotes .quotes-inner .quotes {
    background-color: var(--color-primary);
    height: 70px;
    width: 70px;
    border-radius: 15px;
    margin: -50px auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-quotes .quotes-inner .quotes svg {
    width: 30px;
}


    .blog-detail-one .blog-detail-wrapper .blog-detail-quotes .quotes-inner .quotes svg path {
        fill: var(--color-five);
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-iamge-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 22px;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-iamge-wrapper .image-grid {
        margin-top: 28px;
        margin-bottom: 26px;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-iamge-wrapper .image-grid::before {
        padding-top: 55%;
    }

    .blog-detail-one .blog-detail-wrapper .blog-detail-iamge-wrapper .image-grid img {
        border-radius: 5px;
    }

    .blog-detail-one .blog-detail-wrapper .services-link-wrapper {
        margin-top: 40px;
        margin-bottom: 58px;
    }

    .blog-detail-one .blog-detail-bottom h2 {
        margin-bottom: 30px;
    }

    .blog-detail-one .blog-detail-bottom .blog-two-wrapper {
        grid-gap: 28px;
    }

    .blog-detail-one .blog-detail-bottom .blog-two-wrapper .blog-right-inner {
        margin-left: 0px;
    }

/*=====================================
    blog-detail-two style
    =======================================*/

    .blog-detail-two .blog-classic-wrapper .services-detail-three-left {
        width: 70%;
        padding-right: 23px;
    }

    .blog-detail-two .blog-classic-wrapper .blog-classic-right {
        padding-left: 23px;
    }

    .blog-detail-two .blog-two-wrapper .blog-two-btn {
        border-bottom: 0px;
    }

    .blog-detail-two .blog-two-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);

    }

/*=====================================
    blog-detail-three style
    =======================================*/

    .blog-detail-three .blog-classic-wrapper {
        flex-direction: row-reverse;
    }

    .blog-detail-three .blog-classic-wrapper .blog-classic-right {
        padding-right: 23px;
        padding-left: 0px;
    }

    .blog-detail-three .blog-classic-wrapper .services-detail-three-left {
        padding-left: 23px;
        padding-right: 0px;
    }

    .blog-detail-three .blog-two-wrapper .blog-two-btn {
        border-bottom: 0px;
    }

/*=====================================
    plan-page style
    =======================================*/

    .plan-page .plan-three-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 40px;
        margin-bottom: 60px;
    }

    .plan-page .plan-three-wrapper .left {
        margin-right: 0px;
    }

    .plan-page .plan-three-wrapper .right {
        margin-left: 0px;
    }

/*=====================================
    testimonial-page style
    =======================================*/

    .testimonial-page .testimonial-wrapper-three {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 40px;
        margin-bottom: 70px;
    }

/*=====================================
    contact-us-page style
    =======================================*/

    .contact-us .help-wrapper {
        align-items: center;
    }

    .contact-us .help-wrapper .help-content h2 {
        font-weight: var(--semi-bold);
        margin-bottom: 30px;
    }

    .contact-us .help-wrapper .help-content p {
        max-width: 606px;
        width: 100%;
        margin-bottom: 20px;
    }

    .contact-information .information-wrapper {
        max-width: 1110px;
        width: 100%;
        margin: 0 auto;
    }

    .contact-information .information-wrapper .information-box {
        text-align: center;
        border: 1px solid var(--color-secondary);
        border-radius: 10px;
        background-color: var(--color-five);
        margin-left: 23px;
        margin-right: 23px;
        padding-bottom: 38px;
    }

    .contact-information .information-wrapper .information-box .information-icon {
        background-color: var(--color-secondary);
        height: 80px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: -40px auto 0;
        border-radius: 50px;
    }

    .contact-information .information-wrapper .information-box .information-icon svg {
        font-size: var(--font-size-32);
        line-height: var(--line-height-42);
    }

    .contact-information .information-wrapper .information-box .information-icon svg path {
        fill: var(--color-third);
    }

    .contact-information .information-wrapper .information-box h4 {
        margin-top: 22px;
        margin-bottom: 12px;
    }

    .contact-information .information-wrapper .information-box a {
        display: block;
        font-size: var(--p-16);
        line-height: normal;
        color: var(--color-third);
        font-weight: var(--regular);
    }

    .contact-information .information-wrapper .information-box a:hover{
        color: var(--color-primary);
    }

    .contact-map iframe{
        display: block;
    }

/*=====================================
    error style
    =======================================*/

    .error .error-content {
        text-align: center;
    }

    .error .error-content .error-image {
        max-width: 600px;
        margin: 0 auto 22px;
    }

    .error .error-content h2 {
        margin-bottom: 22px;
    }

    .error .error-content p {
        max-width: 560px;
        width: 100%;
        margin: 0 auto 36px;
    }

/*=====================================
    faq style
    =======================================*/

    .faq .faq-head {
        max-width: 682px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .faq .faq-head h2 {
        margin-bottom: 15px;
    }

    .faq .faq-head p {
        margin-bottom: 50px;
    }

    .faq .faq-head .faq-search {
        max-width: 454px;
        height: 50px;
        width: 100%;
        position: relative;
        margin: 0 auto;
    }

    .faq .faq-head .faq-search input {
        width: 100%;
        height: 100%;
        border: 0px;
        background-color: var(--color-dark);
        padding: 11px 55px 11px 25px;
        border-radius: 4px;
        font-size: var(--p-16);
        line-height: var(--line-height-26);
    }

    .faq .faq-head .faq-search input:focus {
        outline: 0px;
    }

    .faq .faq-head .faq-search .faq-search-btn {
        height: 50px;
        width: 74px;
        border: none;
        border-radius: 4px;
        position: absolute;
        right: 0;
        top: 0;
        background-color: transparent;
    }

    .faq .faq-head .faq-search .faq-search-btn svg path {
        fill: unset;
    }

    .faq .faq-wrapper {
        margin-top: 80px;
    }

    .faq .faq-wrapper .acc {
        max-width: 1120px;
        margin: 0 auto;
    }

    .faq .faq-wrapper .acc .acc-card {
        position: relative;
        margin-bottom: 30px;
    }

    .faq .faq-wrapper .acc .acc-card .acc-title {
        background-color: var(--color-dark);
        color: var(--color-third);
        cursor: pointer;
        display: block;
        padding: 17px 30px;
        position: relative;
        text-align: left;
        font-family: var(--font-secondary);
        font-size: var(--h4-22);
        line-height: var(--line-height-32);
        font-weight: var(--semi-bold);
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .faq .faq-wrapper .acc .acc-card .acc-title::after {
        width: 8px;
        height: 8px;
        border-right: 1px solid #4a6e78;
        border-bottom: 1px solid #4a6e78;
        position: absolute;
        right: 22px;
        content: " ";
        top: 50%;
        transform: rotate(45deg) translateY(-50%);
        transition: all 0.2s ease-in-out;
    }

    .faq .faq-wrapper .acc .acc-card .acc-title.active::after {
        transform: rotate(223deg);
        transition: all 0.2s ease-in-out;
    }

    .faq .faq-wrapper .acc .acc-card .acc-panel {
        border-top: 1px solid rgba(111, 111, 111, 0.50);
        background-color: #fbeed059;
        color: var(--color-four);
        font-size: var(--p-16);
        line-height: var(--line-height-26);
        font-family: var(--font-secondary);
        padding: 25px 35px;
        display: none;
    }


/*=====================================
    career-page style
    =======================================*/

    /*-- job-section --*/

    .career-job .job-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .career-job .job-content {
        margin-left: 67px;
        margin-right: 67px;
    }

    .career-job .job-content .job-quotes {
        background-color: var(--color-primary);
        border-radius: 15px;
        height: 70px;
        width: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 18px;
    }

    .career-job .job-content .job-quotes svg path {
        fill: var(--color-five);
    }

    .career-job .job-content p {
        max-width: 605px;
        margin-top: 23px;
    }

    .career-job .job-image {
        position: relative;
        overflow: hidden;
        max-width: 500px;
        width: 100%;
        margin-left: 67px;
        margin-right: 67px;
    }

    .career-job .job-image::before {
        content: "";
        display: block;
        padding-top: 60%;
    }

    .career-job .job-image img {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }

    /*-- opporunities-section --*/

    .career-apply{
        max-width: 650px;
        margin: 0 auto;
        position: relative;
        background-color: var(--color-dark);
        border-radius: 10px;
    }

    .career-apply h4{
        text-align: center;
    }

    .career-opporunities {
        background-color: rgba(251, 238, 208, 0.50);
    }

    .career-opporunities .career-opportunities-title {
        text-align: center;
    }

    .career-opporunities .career-opportunities-title h2 {
        margin-bottom: 15px;
    }

    .career-opporunities .career-opportunities-title p {
        max-width: 680px;
        margin: 0 auto 60px;
    }

    .career-opporunities .career-opporunities-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .career-opporunities .career-opporunities-wrapper .career-opporunities-box {
        border: 1px solid #F1DDB0;
        border-radius: 18px;
            background-color: #fff;
    }

    .career-opporunities .career-opporunities-wrapper .career-opporunities-box .opporunities-box-title {
        background-color: var(--color-dark);
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }

    .career-opporunities .career-opporunities-wrapper .career-opporunities-box .opporunities-box-title h3 {
        padding: 23px 40px;
        border-bottom: 1px solid #F1DDB0;
    }

    .career-opporunities .career-opporunities-wrapper .career-opporunities-box .opporunities-content {
        padding: 20px 40px 35px 40px;
        background-color: var(--color-five);
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }

    .career-opporunities .career-opporunities-wrapper .career-opporunities-box .opporunities-content p {
        margin-top: 20px;
        margin-bottom: 25px;
    }

    .career-opporunities .career-opporunities-wrapper .career-opporunities-box .opporunities-content .vacancy-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .career-opporunities .career-opporunities-wrapper .career-opporunities-box .opporunities-content .vacancy-info .vacancy-city {
        display: flex;
    }

    .career-opporunities .career-opporunities-wrapper .career-opporunities-box .opporunities-content .vacancy-info .vacancy-city .vacancy-box {
        background-color: var(--color-dark);
        padding: 6px 15px;
        border-radius: 4px;
    }

    .career-opporunities .career-opporunities-wrapper .career-opporunities-box .opporunities-content .vacancy-info .vacancy-city .vacancy-box:nth-child(1){
        margin-right: 7px;
    }
    .career-opporunities .career-opporunities-wrapper .career-opporunities-box .opporunities-content .vacancy-info .vacancy-city .vacancy-box:nth-child(2){
        margin-left: 7px;
    }

    .career-opporunities .career-opporunities-wrapper .career-opporunities-box .opporunities-content .vacancy-info .vacancy-city .vacancy-box p {
        font-weight: var(--medium);
        color: var(--color-third);
        margin: 0px;
    }

    .career-opporunities .career-opporunities-wrapper .career-opporunities-box .opporunities-content .vacancy-info .vacancy-nub p {
        font-weight: var(--semi-bold);
        color: var(--color-third);
        margin: 0px;
    }


    /*-- process-section --*/

    .process .process-title {
        text-align: center;
        margin-bottom: 70px;
    }

    .process .process-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
        position: relative;
    }

    .process .process-wrapper::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        border-bottom: 2px solid var(--color-primary);
        width: 62%;
        transform: translateX(-50%);
    }

    .process .process-wrapper .process-round {
        height: 200px;
        width: 200px;
        background-color: var(--color-secondary);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .process .process-wrapper .process-round .process-round-nub {
        background-color: var(--color-primary);
        height: 70px;
        width: 70px;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
    }

    .process .process-wrapper .process-round .process-round-nub h3 {
        color: var(--color-five);
        font-weight: var(--semi-bold);
    }


    /*-- success-section --*/

    .success {
        padding-bottom: 80px;
    }

    .success .success-title {
        text-align: center;
        margin-bottom: 57px;
    }

    .success .success-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        text-align: center;
    }

    .success .success-wrapper .success-content .success-count {
        height: 70px;
        width: 70px;
        background-color: var(--color-dark);
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 18px;
    }

    .success .success-wrapper .success-content .success-count h4 {
        height: 46px;
        width: 46px;
        background-color: var(--color-primary);
        color: var(--color-five);
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: var(--semi-bold);
        margin: 0px;
    }

    .success .success-wrapper .success-content h4 {
        max-width: 192px;
        margin: 0 auto 10px;
    }

    .success .success-wrapper .success-content p {
        max-width: 308px;
        margin: 0 auto;
    }

    /*-- career-newslatter --*/

    .career-newslatter .career-newslatter-left {
        display: flex;
        margin-right: 122px;
    }

    .career-newslatter .newslatter-wrapper .newslatter-input {
        margin-left: 122px;
    }

    .career-newslatter .career-newslatter-left .icon{
        margin-right: 24px;
    }

    .career-newslatter .career-newslatter-left .icon svg {
        font-size: 76px;
    }

    .career-newslatter .career-newslatter-left .career-newslatter-content{
        margin-left: 24px;
    }

    .career-newslatter .career-newslatter-left .career-newslatter-content h3 {
        max-width: 555px;
        margin-bottom: 15px;
    }

    .career-newslatter .career-newslatter-left .career-newslatter-content p {
        max-width: 767px;
    }


/*=====================================
    presantation-page style
    =======================================*/

    /*-- hero --*/

    .presantation-hero {
        background-image: url(../images/presentation-hero.jpg);
    }

    .presantation-hero .banner-wrapper h1 {
        max-width: 1079px;
        margin: 0 auto;
    }

    .presantation-hero .banner-wrapper p {
        max-width: 780px;
        margin: 30px auto 48px;
        color: var(--color-five);
    }

    .presantation-hero .banner-wrapper .demo-btn {
        margin-bottom: 135px;
    }

    .presantation-hero .banner-wrapper .demo-btn .btn {
        border: 0px;
    }

    .presantation-hero .banner-wrapper .btn-primary:hover {
        background-color: var(--color-five);
    }

    .presantation-hero .presentation-layout {
        display: flex;
        justify-content: space-between;
        background-color: var(--color-five);
        border-radius: 100px;
        padding: 35px 60px;
        margin-bottom: -235px;
        box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.10);
    }

    .presantation-hero .presentation-layout .layout-box {
        display: flex;
        align-items: center;
    }

    .presantation-hero .presentation-layout .layout-box .layout-icon {
        height: 80px;
        min-width: 80px;
        background-color: var(--color-secondary);
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px; 
    }

    .presantation-hero .presentation-layout .layout-box .layout-icon svg {
        font-size: 36px;
    }

    .presantation-hero .presentation-layout .layout-box .layout-content h5 {
        text-align: start;
        margin-bottom: 4px;
        max-width: 150px;
    }

    .presantation-hero .presentation-layout .layout-box .layout-content p {
        text-align: start;
        color: var(--color-four);
        margin: 0px;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 286px;
    }

    /*-- stylish --*/


    .stylish {
        padding-top: 180px;
    }

    .stylish .stylish-title {
        text-align: center;
        margin-bottom: 50px;
    }

    .stylish .stylish-title p {
        max-width: 600px;
        margin: 20px auto 0;
    }

    .stylish .stylish-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .stylish .stylish-grid .stylish-image-content .stylish-image {
        border: 1px solid var(--color-secondary);
        border-radius: 10px;
        max-width: 460px;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .stylish .stylish-grid .stylish-image-content .stylish-image::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(1, 69, 44, 0.60);
        height: 100%;
        width: 100%;
        border-radius: 10px;
        transition: .5s all;
        opacity: 0;
        visibility: hidden;
    }

    .stylish .stylish-grid .stylish-image-content .stylish-image:hover::after {
        opacity: 1;
        visibility: visible;
    }

    .stylish .stylish-grid .stylish-image-content .stylish-image .stylish-btn {
        display: flex;
        justify-content: center;
        position: absolute;
        top: -100%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9;
        visibility: hidden;
        transition: .5s all;
    }

    .stylish .stylish-grid .stylish-image-content .stylish-image:hover .stylish-btn {
        top: 50%;
        visibility: visible;
    }

    .stylish .stylish-grid .stylish-image-content .stylish-image .stylish-btn .onepage {
        background-color: var(--color-secondary);
        padding: 13px 30px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        color: var(--color-third);
    }

    .stylish .stylish-grid .stylish-image-content .stylish-image .stylish-btn .onepage:hover {
        background-color: var(--color-five);
    }

    .stylish .stylish-grid .stylish-image-content .stylish-image .stylish-btn .multipage {
        background-color: var(--color-five);
        padding: 13px 30px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        color: var(--color-third);
    }

    .stylish .stylish-grid .stylish-image-content .stylish-image .stylish-btn .multipage:hover {
        background-color: var(--color-secondary);
    }

    .stylish .stylish-grid .stylish-image-content h4 {
        text-align: center;
        margin-top: 22px;
        font-weight: var(--semi-bold);
    }

    /*-- inner-Pages --*/

    .inner-pages {
        padding-bottom: 140px;
    }

    .inner-pages .inner-pages-title {
        text-align: center;
    }

    .inner-pages .inner-pages-title p {
        max-width: 600px;
        width: 100%;
        margin: 20px auto 60px;
    }

    .inner-pages .inner-image-slider {
        position: relative;
    }

    .inner-pages .inner-image-slider .inner-image::before {
        padding-top: 75%;
    }

    .inner-pages .inner-image-slider .inner-image img{
        object-position: top;
    }

    .inner-pages .inner-image-slider .swiper-pagination {
        bottom: -60px;
    }

    .inner-pages .inner-image-slider .swiper-button-next:after,
    .inner-pages .inner-image-slider .swiper-button-prev:after {
        height: 80px;
        width: 80px;
        font-weight: var(--extra-bold);
    }

    /*-- amazing-layout --*/

    .amazing-layout .amazing-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .amazing-layout .amazing-wrapper .amazing-content-left,
    .amazing-layout .amazing-wrapper .amazing-content-right {
        width: 50%;
    }

    .amazing-layout .amazing-wrapper .amazing-content-left {
        margin-right: 85px;
    }

    .amazing-layout .amazing-wrapper .amazing-content-right {
        margin-left: 85px;
    }

    .amazing-layout .amazing-wrapper .amazing-content-left h2 {
        margin-bottom: 25px;
    }

    .amazing-layout .amazing-wrapper .amazing-content-left p {
        margin-bottom: 15px;
    }

    .amazing-layout .amazing-wrapper .amazing-content-right .amazing-image::before {
        padding-top: 78%;
    }

    .amazing-layout .amazing-wrapper .amazing-content-right .amazing-image .image-text {
        position: absolute;
        top: -55px;
        left: -55px;
        height: 140px;
        width: 140px;
        background-color: var(--color-secondary);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 100px;
    }

    /*-- presentation-life-time  --*/

    .life-time .intructions-nub h4 {
        max-width: 100%;
    }

    /*-- responsive  --*/

    .responsive {
        padding-top: 0;
    }

    .responsive .responsive-wrapper .responsive-content-left .responsive-image {
        max-width: 576px;
        width: 100%;
        position: relative;
        margin: 0 auto;
    }

    .responsive .responsive-wrapper .responsive-content-right {
        margin-left: 60px;
    }

    .responsive .responsive-wrapper .responsive-content-right h2 {
        margin-bottom: 25px;
    }

    .responsive .responsive-wrapper .responsive-content-right p {
        margin-bottom: 15px;
    }


    /*-- presentation-footer --*/

    .presentation-footer {
        padding: 165px 0;
    }

    .presentation-footer .footer-content span {
        font-family: var(--font-secondary);
        font-size: 70px;
        line-height: 80px;
        color: var(--color-five);
        font-weight: var(--semi-bold);
        text-align: center;
        display: block;
        margin-bottom: 28px;
    }

    .presentation-footer .footer-content h2 {
        text-align: center;
        color: var(--color-five);
        font-weight: var(--medium);
        margin-bottom: 52px;
    }

    .presentation-footer .footer-content ul {
        display: flex;
        justify-content: center;
        gap: 75px;
    }

    .presentation-footer .footer-content ul li {
        position: relative;
        color: var(--color-five);
        font-family: var(--font-secondary);
        font-size: var(--h6-18);
        line-height: var(--line-height-26);
    }

    .presentation-footer .footer-content ul li:before {
        content: url(../images/growth-mark.png);
        position: absolute;
        top: 0;
        left: -35px;
    }

    .presentation-footer .footer-content .demo-btn {
        text-align: center;
        margin-top: 55px;
    }

    .presentation-footer .footer-content .btn-primary {
        background-color: var(--color-secondary);
        color: var(--color-third);
    }

    .presentation-footer .footer-content .btn-primary:hover {
        background-color: var(--color-five);
    }

    .hidden {
      display: none;
  }

  #combined-search-results section ul li a {
    color: var(--color-primary);
}

.services-detail-one.section.services-detail-features {
    padding-top: 0;
}