/*=========================================================
Template Name:Plumbtech-Real Estate & Property HTML5 Template
https://www.templatemonster.com/authors/techtime/
Description: Description
Version: 1.0.0
Text Domain: Plumbtech
Tags: 	agency, Business Agency, Business Consultant, business optimization, company website, consultancy, Plumbtechng, Plumbtechng Firm, corporate solutions, digital agency, financial analysis, market trends analysis, Strategic insights
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Plumbtech Header Top Menu Area Css
02. Plumbtech Nav Menu Area Css 
03. Plumbtech Slider Area Css
04. Plumbtech Section Title Css
05. Plumbtech Service Area css
06. Plumbtech About Area Css
07. Plumbtech Counter Area Css
08. Plumbtech Testimonial Area Css
09. Plumbtech Process Area Css
10. Plumbtech Team Area Css
11. Plumbtech Faq Area Css
12. Plumbtech Call Do Section Css
13. Plumbtech Form Box Css
14. Plumbtech Blog Area Css
15. Plumbtech footer Area Css
16. Plumbtech Subscribe Area Css
17. Plumbtech Prossess Ber Css
18. Plumbtech Scrollup Section
19. Plumbtech Breadcumb Area Css
20. Plumbtech abouts_areas Css
21. Plumbtech Pricing Section Css
22. Plumbtech Contact  US Css
23. Plumbtech Blog Sidber Widget CSS
24. Plumbtech Search Box Css
25. Plumbtech Loader Css
=======================*/

/*==================================================
 <-- Plumbtech Header Top Menu Area Css-->
===================================================*/

.topbar-area {
    padding: 15px 0;
    position: relative;
}

.topbar-items ul {
    list-style: none;
}

.topbar-items ul li {
    display: inline-block;
    margin-right: 24px;
    color: #000;
    font-family: Jost;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.topbar-items ul li a {
    color: #000;
    font-family: Jost;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

.topbar-items ul li a span {
    color: #0D8FE5;
}

.topbar-items ul li i {
    margin-right: 5px;
    font-size: 15px;
    color: #0D8FE5;
}

.topbar-social {
    text-align: right;
}

.topbar-social h4 {
    display: inline-block;
    margin-right: 20px;
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

.topbar-social ul {
    list-style: none;
    display: inline-block;
}

.topbar-social ul li {
    display: inline-block;
    margin-right: 11px;
}

.topbar-social ul li a {
    transition: .5s;
    color: #0D8FE5;
    display: inline-block;
}



/*==================================================
 <-- Plumbtech Header Area Css-->
===================================================*/

.header-area {
    position: relative;
    z-index: 9;
}

.header-area::before {
    position: absolute;
    content: "";
    width: 1608px;
    height: 100%;
    background: #0D8FE5;
    right: -34px;
    top: 0;
    z-index: -1;
    transform: skew(-30deg);
}

.header-itmes {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    margin-top: -66px;
}

.header-menu {
    margin-right: -100px;
}

.header-menu ul {
    list-style: none;
    display: inline-block;
}

.header-menu ul li {
    display: inline-block;
    margin-right: 30px;
}

.header-menu ul li a {
    color: #FFF;
    font-family: Jost;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: relative;
    transition: .5s;
    padding: 36px 0;
    text-decoration: none;
    display: inline-block;
}

.header-menu ul li a i {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -6px;
    opacity: 0;
    transition: all 500 ease;
}

.header-menu ul li a:hover i {
    opacity: 1;
}

.phone span {
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
}

.phone h4 {
    color: #FFF;
    font-size: 24px;
    font-weight: 400;
}

.phone h4 i {
    margin-right: 10px;
}


/* sticky menu css */

.sticky-nav {
    left: 0;
    margin: auto;
    top: 0;
    right: 0;
    width: 100%;
    position: fixed !important;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    transition: 0.5s !important;
    background: #FFF !important;
    z-index: 9999 !important;
    animation: fadeInDown 1s both 0.2s;
    padding: 0 30px;
}

.sticky-nav .logo {
    margin-top: 0;
}


/* sub menu */

.header-menu ul .sub-menu {
    background: #fff;
    position: absolute;
    top: 98%;
    border-radius: 5px;
    width: 250px;
    text-align: left;
    margin: 0;
    -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
    transition: .5s;
    visibility: hidden;
    border-top: 2px solid #0D8FE5;
    opacity: 0;
    z-index: 11;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: scaleY(0) translateZ(100px);
    transform: scaleY(0) translateZ(100px);
    -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    overflow: hidden;
    padding: 10px 10px;
}

.header-menu ul li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scaleY(1) translateZ(0px);
    transform: scaleY(1) translateZ(0px);
}

.header-menu ul .sub-menu ul li {
    display: inline-block;
    margin-left: 0;
    width: 100%;
}

.header-menu ul .sub-menu ul li a {
    padding: 8px 12px;
    text-align: left;
    width: 100%;
    display: inline-block;
    visibility: inherit !important;
    color: #003d4d;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    position: relative;
}

.header-menu ul .sub-menu ul li a:hover {
    color: #fff;
    background: #0D8FE5;
}

.header-menu ul .sub-menu ul li a::before {
    position: absolute;
    top: 50%;
    right: 20px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f101";
    font-size: 14px;
    color: #FFF;
    transform: translateY(-50%) scale(0);
    -webkit-transition: 500ms;
    transition: 500ms;
}

.header-menu ul .sub-menu ul li a:hover::before {
    transform: translateY(-50%) scale(1);
}

/* header style two */

.header-area.bratcome {
    top: 0;
    margin-bottom: 0;
}


/* mobile menu */

.mobile-menu-area {
    display: none;
}


/*==================================================
 <-- Plumbtech Landing Page Css-->
===================================================*/

.navbar {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar .list {
    display: flex;
    align-items: center;
    list-style: none;
}

.navbar .list li {
    margin-right: 37px;
}

.navbar .list a {
    color: #FFF;
    font-family: Jost;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: relative;
    transition: .5s;
    padding: 36px 0;
    text-decoration: none;
    display: inline-block;
}

.navbar .list a::before {
    position: absolute;
    content: "";
    height: 3px;
    width: 0;
    background: #ffffff;
    bottom: 0px;
    right: 0;
    transition: .5s;
}

.navbar .list a:hover::before {
    width: 100%;
    left: 0;
}


#menu-btn {
    display: none;
}



/*==================================================
 <-- Plumbtech All Btn Css-->
===================================================*/
.plumbtech-btn {
    text-align: right;
}

.plumbtech-btn a {
    color: #0D8FE5;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 5px;
    background: #FFF;
    display: inline-block;
    padding: 12px 33px;
    position: relative;
    z-index: 1;
    transition: all 500 ease;
    overflow: hidden;
}

.plumbtech-btn a::before {
    position: absolute;
    content: '';
    background-color: #0D8FE5;
    width: 100%;
    height: 0%;
    left: 50%;
    top: 50%;
    border-radius: 0px;
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: -1;
    transition: all 500ms ease;
}

.plumbtech-btn a:hover {
    color: #fff;
}

.plumbtech-btn a:hover:before {
    height: 380%;
}

/* slider btn */

.plumbtech-btn.slider {
    text-align: left;
    opacity: 0;
    transform: perspective(400px) rotateY(0deg) translateY(80px);
    transform-origin: bottom;
    transition: all 1500ms ease;
    display: inline-block;
    margin-right: 20px;
}

.active .plumbtech-btn.slider {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg) translateY(0px);
    transition-delay: 1600ms;
}

.plumbtech-btn.slider a {
    background: #0D8FE5;
    color: #FFF;
}

.plumbtech-btn.slider a:hover {
    color: #0D8FE5;
}

.plumbtech-btn.slider a::before {
    background: #FFF;
}

.plumbtech-btn.slider2 {
    text-align: left;
    display: inline-block;
    opacity: 0;
    transform: perspective(400px) rotateY(0deg) translateY(80px);
    transform-origin: bottom;
    transition: all 1500ms ease;
}

.active .plumbtech-btn.slider2 {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg) translateY(0px);
    transition-delay: 1600ms;
}

.plumbtech-btn.slider2 a {
    background: transparent;
    border: 2px solid #0D8FE5;
    color: #FFF;
}

/*==================================================
 <-- Plumbtech Banner Area Css-->
===================================================*/
.slider-area {
    background: url(../image/banner1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 900px;
    z-index: 1;
}

/* slide content */

.slider-content {
    position: absolute;
    top: 58%;
    transform: translateY(-50%);
    width: 60%;
    z-index: 9;
    left: 12%;
}

.slide-sub-title {
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 30px;
    padding: 0 40px;
    opacity: 0;
    transition: transform 1000ms ease, opacity 1000ms ease;
    transform: translateX(-100px);
}

.slider-sub-title-anim {
    display: inline-block;
    position: relative;
}

.slider-sub-title-anim::after {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 2px;
    background-color: #FFF;
    content: "";
    animation: borderHv 3s infinite;
}

@keyframes borderHv {
    0% {
        width: 0%;
    }

    50% {
        width: 100%;
        left: 0;
    }

    100% {
        width: 0;
        left: 100%;
    }
}

.active .slide-sub-title {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1200ms;
}

.slide-sub-title::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../image/title-shape.png);
    background-position: center center;
    background-repeat: no-repeat;
    left: -49%;
}

.slider-main-title {
    color: #FFF;
    font-size: 60px;
    font-weight: 700;
    position: relative;
    opacity: 0;
    transition: transform 1200ms ease, opacity 1200ms ease;
    transform: translateX(200px);
}

.slider-main-title-anim {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin-bottom: -20px;
    line-height: 1.2;
}

.slider-main-title-anim:after {
    content: "";
    width: 101%;
    height: 84%;
    position: absolute;
    top: 12px;
    left: 100%;
    background: #FFF;
    -webkit-transition: 1s cubic-bezier(0.858, 0.01, 0.068, 0.99);
    -o-transition: 1s cubic-bezier(0.858, 0.01, 0.068, 0.99);
    transition: 1s cubic-bezier(0.858, 0.01, 0.068, 0.99);
    transition-delay: 1s;
    z-index: 3;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
}

.active .slider-main-title {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1400ms;
}

.active .slider-main-title-anim::after {
    transform: translateX(1%);
    transition-delay: 1500ms;
}

.slider-discription {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 39%;
    margin: 35px 0 40px;
    opacity: 0;
    transition: transform 1000ms ease, opacity 1000ms ease;
    transform: translateX(-100px);
}

.active .slider-discription {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1200ms;
}

/* owl nav css */

.owl-prev {
    position: absolute;
    top: 50%;
    left: 0;
}

.owl-prev i {
    color: #FFF;
    font-size: 30px;
}

.owl-next {
    position: absolute;
    right: 0;
    top: 50%;
}

.owl-next i {
    color: #FFF;
    font-size: 30px;
}

/* video area css */

.video-area {
    height: 1000px;
    position: relative;
}

.video-area::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
}

.video-area {
    height: 1000px;
    position: relative;
}

video.video-background {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

/*==================================================
 <-- Plumbtech Section title Css-->
===================================================*/

.section-sub-shape {
    display: inline-block;
    position: relative;
    top: -3px;
}

.section-sub-shape img:first-child,
.section-sub-shape img:first-child {
    animation: right 2s ease-in infinite;
}

.section-sub-shape img:last-child,
.section-sub-shape img:last-child {
    animation: left 2s ease-in infinite;
}

.section-sub-title {
    display: inline-block;
}

.section-sub-title h4 {
    display: inline-block;
    color: #0D8FE5;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 15px;
}

.section-main-title h2 {
    color: #001733;
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 15px;
}

.section-discription p {
    color: #001733;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    width: 54%;
    margin: auto;
    margin-bottom: 47px;
}


/*==================================================
 <-- Plumbtech Service Area Css-->
===================================================*/
.service-area {
    padding: 120px 0 120px;
}

.service-single-box {
    text-align: center;
}

.service-thumb {
    position: relative;
    overflow: hidden;
}

.service-thumb::before {
    position: absolute;
    inset: 0px;
    content: "";
    background: rgba(13, 143, 229, 0.60);
    width: 0%;
    height: 0%;
    transform: translateY(-100%);
    transition: all 500ms ease 0s;
    z-index: 1;
}

.service-single-box:hover .service-thumb::before {
    width: 100%;
    height: 100%;
    transform: translateY(0%);
}

.service-thumb img {
    object-fit: cover;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    transform: scale(1);
    transition: all 500ms ease;
}

.service-single-box:hover .service-thumb img {
    transform: scale(1.1);
}

.service-icon img {
    width: auto;
}

.service-icon img:first-child,
.service-icon img:first-child {
    animation: right 2s ease-in infinite;
}

.service-icon img:last-child,
.service-icon img:last-child {
    animation: left 2s ease-in infinite;
}

.service-icon {
    position: relative;
    top: -21px;
    z-index: 9;
}

.service-content h4 a {
    color: #0D8FE5;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
}

.service-content p {
    color: #001733;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin: 12px 0px 0;
}

/*==================================================
 <-- Plumbtech About Area Css-->
===================================================*/

.about-area {
    padding: 0px 0 120px;
    background: url(../image/about-bg.webp) no-repeat scroll right bottom white;
}

.about-contact-box {
    border-radius: 10px;
    background: #0D8FE5;
    padding: 30px 30px 40px;
}

.about-contact-content h4 {
    color: #FFF;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.about-contact-content p {
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 7px 0 19px;
}

.form_box input {
    width: 350px;
    height: 50px;
    outline: 0;
    border: 0;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 400;
}

.form_box input::placeholder {
    color: #80858B;
    font-size: 16px;
    font-weight: 600;
}

.form_box textarea {
    width: 350px;
    height: 150px;
    border: 0;
    outline: 0;
    padding: 10px 10px;
    margin-bottom: 20px;
}

.form_box textarea::placeholder {
    color: #80858B;
    font-size: 16px;
    font-weight: 600;
}

.form-group button {
    width: 180px;
    height: 50px;
    outline: 0;
    border: 0;
    border-radius: 5px;
    background: #FFF;
    color: #001733;
    font-size: 16px;
    font-weight: 600;
}

/* about content */

.about-content {
    margin-left: 65px;
}

/* about section title */

.section-discription.about p {
    width: 70%;
    margin: 0 0 47px;
}

/* about single box */

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

.about-icon {
    float: left;
    margin-right: -60px;
    margin-bottom: 44px;
}

.about-icon img {
    width: 38%;
}

.about-text h4 {
    font-size: 25px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 16px;
}

.about-text p {
    width: 44%;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
}

/* about btn  */

.plumbtech-btn.about {
    text-align: left;
}

.plumbtech-btn.about a {
    background: #0D8FE5;
    color: #FFF;
}

.plumbtech-btn.about a:hover {
    color: #0D8FE5;
}

.plumbtech-btn.about a::before {
    background: #FFF;
}

/*==================================================
 <-- Plumbtech Project Area Css-->
===================================================*/
.project-area {
    padding: 120px 0 90px;
}

.project-single-box {
    text-align: center;
    overflow: hidden;
    margin-bottom: 30px;
}

.project-thumb {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.project-thumb::before {
    position: absolute;
    inset: 0px;
    content: "";
    background: rgba(13, 143, 229, 0.60);
    width: 0%;
    height: 0%;
    transform: translateY(-100%);
    transition: all 500ms ease 0s;
    z-index: 1;
}

.project-single-box:hover .project-thumb::before {
    width: 100%;
    height: 100%;
    transform: translateY(0%);
}

.project-thumb img {
    object-fit: cover;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    transform: scale(1);
    transition: all 500ms ease;
}

.project-single-box:hover .project-thumb img {
    transform: scale(1.1);
}

.project-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    z-index: 1;
}

.project-content h6 {
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    position: relative;
    left: -65%;
    transition: all 0.4s ease-in-out;
}

.project-single-box:hover .project-content h6 {
    left: 0;
    transition-delay: 0.5s;
}

/* project btn */

.plumbtech-btn.project {
    text-align: center;
    margin-top: 10px;
    position: relative;
    right: -71%;
    transition: 0.3s cubic-bezier(0.5, 1, 0.89, 1);
}

.project-single-box:hover .plumbtech-btn.project {
    right: 0;
    transition-delay: 0.9s;
}

.plumbtech-btn.project a {
    color: #001733;
    font-size: 20px;
    font-weight: 600;
    padding: 12px 20px;
}

.plumbtech-btn.project a:hover {
    color: #FFF;
}

/*==================================================
 <-- Plumbtech Commersial Area Css-->
===================================================*/

.commercial-area {
    background: url(../image/commersial-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 700px;
    background-attachment: fixed;
}

.commercial-text h4 {
    color: #001733;
    font-size: 45px;
    font-weight: 600;
    line-height: normal;
    margin: 10px 0 13px;
}

.commercial-text p {
    color: #001733;
    font-size: 16px;
    font-weight: 400;
}

/*==================================================
 <-- Plumbtech Choose Us Area Css-->
===================================================*/

.choose-us-area {
    padding: 0 0 120px;
}

.row.choose {
    margin-top: 70px;
    position: relative;
    z-index: 1;
}

/* tab css */

.tab.choosel-list-tab {
    margin-top: -70px;
}

.tabs_item {
    display: none;
    position: relative;
}

.tabs_item:first-child {
    display: block;
}

.tab.choosel-list-tab ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab.choosel-list-tab ul li {
    list-style: none;
    position: relative;
    height: 120px;
    width: 416px;
    background: #0D8FE5;
    border: 1px solid #0D8FE5;
    line-height: 120px;
    text-align: center;
    z-index: 1;
    overflow: hidden;
}

.tab.choosel-list-tab ul li::before {
    position: absolute;
    content: '';
    background-color: #FFF;
    width: 100%;
    height: 0%;
    left: 50%;
    top: 50%;
    border-radius: 0px;
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: -1;
    transition: all 500ms ease;
}

.tab.choosel-list-tab ul li:hover:before {
    height: 380%;
}

.tab.choosel-list-tab ul li a {
    color: #FFF;
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    transform: 0.5s;
}

.tab.choosel-list-tab ul li:hover a {
    color: #0D8FE5;
}

.tab_content {
    margin-top: 100px;
}

/* choose content */

.choose-discription p {
    color: #001733;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    width: 75%;
    margin-bottom: 40px;
}

/* choose single box */

.choose-single-box {
    text-align: center;
    margin-bottom: 30px;
}

.choose-icon {
    display: inline-block;
    width: 54px;
    height: 54px;
    border-radius: 500px;
    background-color: rgba(13, 143, 229, 0.3);
    line-height: 48px;
    position: relative;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.choose-icon::before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: 50%;
    left: 50%;
    border-radius: 500px;
    background: #0D8FE5;
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.choose-single-box:hover .choose-icon::before {
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
}

.choose-icon img {
    transition: .5s;
}

.choose-single-box:hover .choose-icon img {
    filter: brightness(0)invert(1);
    color: #fff;
    transform: rotateY(180deg);
}

.choose-single-box:hover .choose-icon img {
    color: #fff;
}

.choose-content h4 {
    color: #001733;
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    margin: 20px 0px 4px;
}

.choose-content p {
    color: #001733;
    font-size: 16px;
    font-weight: 400;
}

/* choose btn */

.plumbtech-btn.choose {
    text-align: left;
}

.plumbtech-btn.choose a {
    background: #0D8FE5;
    color: #FFF;
    padding: 12px 40px;
}

.plumbtech-btn.choose a:hover{
    color: #0D8FE5;
}

.plumbtech-btn.choose a::before{
    background: #FFF;
}

/* choose thumb */

.choose-thumb img {
    width: 100%;
}

/* choose items thumb */

.choose-items-thumb {
    position: absolute;
    left: 37%;
    top: 0;
    z-index: -1;
}

.choose-items-thumb img {
    width: 24%;
}

/*==================================================
 <-- Plumbtech Tools Area Css-->
===================================================*/
.tools-area {
    padding: 0 0 85px;
}

.tools-single-box {
    text-align: center;
    margin: 10px;
    margin-bottom: 30px;
}

.tools-thumb {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.tools-thumb::before {
    position: absolute;
    inset: 0px;
    content: "";
    background: rgba(13, 143, 229, 0.60);
    width: 0%;
    height: 0%;
    transform: translateY(-100%);
    transition: all 500ms ease 0s;
    z-index: 1;
}

.tools-single-box:hover .tools-thumb::before {
    width: 100%;
    height: 100%;
    transform: translateY(0%);
}

.tools-thumb img {
    object-fit: cover;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    transform: scale(1);
    transition: all 500ms ease;
}

.tools-single-box:hover .tools-thumb img {
    transform: scale(1.1);
}


.tools-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 45%;
    z-index: 1;
}

.tools-icon ul li {
    list-style: none;
    display: block;
    width: 54px;
    height: 54px;
    line-height: 58px;
    background: #FFF;
    margin: 0 0 12px;
    font-size: 20px;
    border-radius: 50%;
}

.tools-icon ul li a i{
    color: rgba(0, 23, 51, 0.50);
}

.tools-icon ul li.style1 {
    position: relative;
    top: -100px;
    opacity: 0;
    transition: 0.3s cubic-bezier(0.5, 1, 0.89, 1);
}

.tools-single-box:hover .tools-icon ul li.style1 {
    opacity: 1;
    top: 0;
}

.tools-icon ul li.style2 {
    position: relative;
    left: -160px;
    opacity: 0;
    transition: 0.6s cubic-bezier(0.5, 1, 0.89, 1);
}

.tools-single-box:hover .tools-icon ul li.style2 {
    opacity: 1;
    left: 0;
}

.tools-icon ul li.style3 {
    position: relative;
    bottom: -100px;
    opacity: 0;
    transition: 0.9s cubic-bezier(0.5, 1, 0.89, 1);
}

.tools-single-box:hover .tools-icon ul li.style3 {
    opacity: 1;
    bottom: 0;
}

.tools-content h4 {
    color: #001733;
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    margin: 15px 0 0;
}

.tools-content span {
    color: rgba(0, 23, 51, 0.50);
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
}


/*==================================================
 <-- Plumbtech Pricing Area Css-->
===================================================*/
.pricing-area{
    padding: 0 0 120px;
}

.pricing-single-box {
    background: #FFF;
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
    text-align: center;
    padding: 22px 33px 30px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.pricing-single-box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 110px;
    background: #0D8FE5;
    border-radius: 5px 5px 0px 0px;
    left: 0;
    top: 0;
    z-index: -1;
}

.pricing-single-box::after {
    position: absolute;
    content: '';
    background-color: #00BEE7;
    border-radius: 5px 5px 0px 0px;
    width: 0%;
    height: 110px;
    left: 50%;
    top: 50%;
    border-radius: 0px;
    transform: translate(-37%, -241%) rotate(0deg);
    z-index: -1;
    transition: all 500ms ease;
}

.pricing-single-box:hover::after{
    width: 380%;
}

.pricing-content {
    margin-bottom: 42px;
}

.pricing-content h4 {
    color: #FFF;
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 5px;
}

.pricing-content p {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.pricing-rate {
    margin-bottom: 40px;
}

.pricing-rate h4 {
    color: #0D8FE5;
    font-size: 45px;
    font-weight: 500;
    display: inline-block;
}

.pricing-rate span {
    color: #001733;
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
}

.pricing-list {
    margin-bottom: 45px;
}

.pricing-list span {
    display: block;
    text-align: left;
    color: #001733;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 12px;
    position: relative;
    left: 0;
    transition: 0.5s;
}

.pricing-list span:hover{
    left: 10px;
    color: #0D8FE5;
}

.pricing-list span i{
    color: #0D8FE5;
}

/* pricing btn */

.plumbtech-btn.pricing {
    text-align: center;
}

.plumbtech-btn.pricing a {
    background: #0D8FE5;
    color: #FFF;
    position: relative;
    width: 350px;
    height: 45px;
}

.plumbtech-btn.pricing a::before{
    background: #00BEE7;
}

.plumbtech-btn.pricing a:hover:before {
    height: 635%;
}



/*==================================================
 <-- Plumbtech Testimonial Area Css-->
===================================================*/
.testimonial-area{
    padding: 120px 0 120px;
    background:#0D8FE5;
}

/* testi section title */

.section-sub-title.testi h4 {
    color: #FFF;
}

.section-main-title.testi h2 {
    color: #fff;
}

.section-discription.testi P {
    color: #FFFF;
}

/* testimonial single box */

.testi-single-box {
    border-radius: 10px;
    background: #FFF;
    position: relative;
    padding: 38px 25px 38px;
    margin: 10px;
}

.testi-content p {
    color: #001733;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 40px;
}

.testi-shape {
    float: left;
    margin-right: 14px;
}

.testi-bottom-content h4 {
    color: #001733;
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
}

.testi-bottom-content span {
    color: rgba(0, 23, 51, 0.50);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.testi-rating i {
    font-size: 20px;
    color: #FFCC00;
}

.testi-icon {
    position: absolute;
    top: 6px;
    right: 5px;
}

.testi-icon i {
    font-size: 35px;
    color: #0D8FE5;
}

/*==================================================
 <-- Plumbtech Blog Area Css-->
===================================================*/

.blog-area{
    padding: 120px 0 120px;
}

.blog-single-box {
    background: rgba(13, 143, 229, 0.10);
    padding: 25px 25px 22px;
}

.blog-thumb {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.blog-thumb::before {
    position: absolute;
    inset: 0px;
    content: "";
    background: rgba(13, 143, 229, 0.60);
    width: 0%;
    height: 0%;
    transform: translateY(-100%);
    transition: all 500ms ease 0s;
    z-index: 1;
}

.blog-single-box:hover .blog-thumb::before {
    width: 100%;
    height: 100%;
    transform: translateY(0%);
}

.blog-thumb img {
    object-fit: cover;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    transform: scale(1);
    transition: all 500ms ease;
}

.blog-single-box:hover .blog-thumb img {
    transform: scale(1.1);
}


.blog-meta {
    margin: 26px 0px 18px;
}

.blog-meta span {
    color: #001733;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    margin-right: 30px;
}

.blog-meta span i{
    color: #0D8FE5;
    margin-right: 5px;
}

.blog-title h4 a {
    color: #001733;
    font-size: 24px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.5s;
    position: relative;
    background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
    transition: all 500ms ease;
}

.blog-single-box:hover:hover .blog-title h4 a {
    color: #0D8FE5;
    background-size: 100% 1px;
}

/* blog btn */

.plumbtech-btn.blog {
    text-align: left;
    margin-top: 20px;
}

.plumbtech-btn.blog a{
    background: #0D8FE5;
    border-radius: 0;
    color: #FFF;
}

.plumbtech-btn.blog a:hover{
    color: #0D8FE5;
}

.plumbtech-btn.blog a::before{
    background: #FFF;
}


/*==================================================
 <-- Plumbtech Footer Area Css-->
===================================================*/

.footer-area {
    padding: 120px 0 0px;
    background: #001733;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.footer-area::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(219, 219, 219, 0.25);
    left: 0;
    bottom: 65px;
}

/* footer widget */

.footer-wiget-logo {
    margin-top: -22px;
}

.footer-wiget-text h4 {
    margin: 25px 0 22px;
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 400;
    width: 78%;
}

.footer-wiget-title h4 {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    line-height: 34px;
    font-weight: 600;
    padding: 0 0 32px;
    transition: .5s;
}

.footer-socilal-title h4 {
    opacity: 0.800;
    font-size: 22px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 16px;
    position: relative;
}

/* footer social */

.footer-social ul li {
    list-style: none;
    display: inline-block;
    margin-right: 7px;
}

.footer-social ul li a i {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    color: #FFF;
    transition: .5s;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.footer-social ul li a i::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0px;
    height: 100%;
    content: "";
    bottom: 0;
    background: #0D8FE5;
    border-radius: 50%;
    z-index: -1;
    transition: .5s;
    margin: auto;
}

.footer-social ul li a i:hover::after {
    width: 100%;
    left: 0;
}


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

.footer-wiget-menu ul li {
    list-style: none;
    margin-top: 0px;
}

.footer-wiget-menu ul li a {
    display: inline-block;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    transition: .5s;
    margin: 0;
    line-height: 35px;
    color: #ffffff;
}

.footer-wiget-menu ul li a:hover {
    color: #0D8FE5;
    margin-left: 10px;
}

.footer-wiget-touch ul li {
    list-style: none;
    display: block;
    margin-bottom: 15px;
}

.icon {
    float: left;
    margin-right: 15px;
}

.icon i {
    color: #fff;
    font-size: 20px;
}

.title h6 {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.adress a {
    display: inline-block;
    color: #FFF;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    text-decoration: none;
}

.footer-widget-photo ul {
    margin-top: 16px;
}

.footer-widget-photo ul li {
    list-style: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.footer-widget-photo ul li img {
    width: 100%;
    transition: all 2s ease;
}

.footer-widget-photo ul li img:hover {
    transform: scale(1.15);
}

.footer-widget-photo ul li::before {
    position: absolute;
    left: 0;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 143, 229, 0.90);
    z-index: 1;
    opacity: 0.5;
    -webkit-transform: scaleY(0) translateZ(100px);
    -ms-transform: scaleY(0) translateZ(100px);
    transform: scaleY(0) translateZ(100px);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    visibility: hidden;
}

.footer-widget-photo ul li:hover::before {
    -webkit-transform: scaleY(1) translateZ(0px);
    -ms-transform: scaleY(1) translateZ(0px);
    transform: scaleY(1) translateZ(0px);
    visibility: visible;
}


.copyright-text {
    margin-top: 15px;
    text-align: center;
}

.copyright-text p {
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    line-height: 124.5%;
}

.copyright-text p a {
    color: #0D8FE5;
}


/*===============================================================
<-- All Inner Page Css-->
=================================================================*/
/* breatcome area css */


.breatcome-area {
    background: url(../image/bretcome-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 154px 0;
}

.breatcome-content {
    position: relative;
}

.breatcome-discription p {
    text-align: center;
    font-size: 28px;
    line-height: 27px;
    color: #ffffff;
    font-weight: 400;
}

.breatcome-title h1 {
    color: #fff;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 19px;
    text-align: center;
}

.bratcome-text {
    position: absolute;
    left: 0;
    bottom: -173px;
    background: #0D8FE5;
    padding: 23px 35px;
    border-radius: 5px 5px 0 0;
}

.bratcome-text ul {
    list-style: none;
}

.bratcome-text ul li {
    display: inline-block;
    margin-right: 12px;
    font-size: 22px;
    color: #ffffff;
    font-weight: 500;
    line-height: 27px;
    font-weight: 500;
}

.bratcome-text ul li a {
    display: inline-block;
    font-size: 22px;
    line-height: 27px;
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: .5s;
}

.bratcome-text ul li a::before {
    position: absolute;
    content: "/";
    left: 62px;
}

/*==================================================
 <-- About Area Inner Page Css-->
===================================================*/

.about-area.inner-page {
    padding: 120px 0 120px;
}


/*==================================================
 <-- Team Area Inner Page Css-->
===================================================*/
.team-area {
    background: #F9F8FF;
    padding: 120px 0 250px;
    margin-bottom: -170px;
}

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

.team-thumb {
    position: relative;
    overflow: hidden;
}

.team-thumb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
}

.team-single-box:hover .team-thumb::before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
    opacity: 1;
}

.team-thumb img {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.team-single-box:hover .team-thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


.team-content {
    border-radius: 2px;
    background: #FFF;
    box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.10);
    text-align: center;
    padding: 20px 0 30px;
}

.team-title h4 a {
    font-size: 24px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.5s;
}

.team-single-box:hover .team-title h4 a{
    color:#0D8FE5;
}

.team-title span {
    color: #747474;
    font-size: 16px;
    font-weight: 400;
    line-height: 36px;
}

.team-social-icon {
    margin: 14px 0 18px;
}

.team-social-icon ul li {
    list-style: none;
    display: inline-block;
    margin-right: 13px;
}

.team-social-icon ul li a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #D9D9D9;
    display: inline-block;
    line-height: 38px;
    color: #747474;
    transition: .5s;
    position: relative;
}

.team-social-icon a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: scale(0);
    border-radius: 50%;
    transition: 0.5s;
    color: #fff;
    background: #0D8FE5;
}

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

.team-social-icon a:hover {
    color: #fff;
}

.team-social-icon a i {
    position: relative;
    z-index: 2;
    display: inline-block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes iconTranslateY {
    49% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    51% {
        opacity: 1;
    }
}

.team-social-icon a:hover i {
    animation: iconTranslateY 0.4s forwards;
}

.team-btn a {
    width: 267px;
    height: 47px;
    border-radius: 3px;
    background: #001733;
    color: #FFF;
    display: inline-block;
    line-height: 47px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    transition: 0.5s;
}

.team-btn a:hover{
    color: #fff;
}

.team-btn a::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: #0D8FE5;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    transform: scale(0);
    transition: 0.5s;
    z-index: -1;
}

.team-btn a:hover::before{
    transform: scale(1);
}



/*==================================================
 <-- Team Details Inner Page Css-->
===================================================*/

.team-details-area {
    padding: 122px 0 0;
}

.team-author-thumb img {
    width: 100%;
}

/* progress bar  */

.team-details-area .process-ber-plugin {
    margin: 50px 60px 0;
}

.team-details-area .barfiller {
    margin-bottom: 40px;
}


/* progress bar */


.barfiller {
    width: 368px;
    height: 8px;
    position: relative;
    margin-bottom: 16px;
    margin-top: 21px;
    background-color: #f2f2f2;
}

.barfiller .fill {
    display: block;
    position: relative;
    width: 0px;
    height: 100%;
    z-index: 1;
}

.barfiller .tip {
    font-size: 18px;
    color: #252638;
    font-weight: 500;
    top: -42px;
    padding: 1px 6px;
    left: 0px;
    position: absolute;
}

.stat-bar:nth-of-type(1) .stat-bar-rating {
    animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}

span.fill {
    background: #0D8FE5 !important;
    border-radius: 0px 15px 15px 0px;
}


/* author info */

.row.author-info {
    background: #f8f6f1;
    padding: 35px 40px 25px;
    margin-top: -200px;
}

.team-author-exprience ul li {
    list-style: none;
    margin-bottom: 17px;
}

.team-author-exprience ul li span {
    font-size: 20px;
    color: #888888;
    font-weight: 400;
    line-height: 45px;
}

.team-author-exprience ul li h4 {
    font-size: 24px;
    color: #3c3531;
    font-weight: 600;
}

.team-author-socila {
    text-align: center;
    margin-right: -76px;
    margin-top: 24px;
}

.team-author-socila ul li {
    list-style: none;
    margin: 17px 0px 0;
}

.team-author-socila ul li a {
    display: inline-block;
    height: 40px;
    width: 40px;
    background: #ffffff;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.team-author-socila ul li a::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0D8FE5;
    border-radius: 50%;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}

.team-author-socila ul li a:hover::before {
    transform: scale(1);
}

.team-author-socila ul li a {
    transition: .5s;
}

.team-author-socila ul li a:hover i {
    color: #ffffff;
}


/*==================================================
 <-- Service Details Inner Page Css-->
===================================================*/

.service-details-area {
    padding: 120px 0 72px;
}

/* widget catagories box */

.widget-categories-box {
    margin-bottom: 30px;
}

.widget-categories-menu ul li {
    list-style: none;
    padding: 15px;
    position: relative;
    margin-bottom: 17px;
    background: #f8f6f1;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.widget-categories-menu ul li::after {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: all 0.5s linear 0s;
    background-color: #0D8FE5;
    content: "";
    z-index: -1;
}

.widget-categories-menu ul li:hover::after {
    width: 100%;
}

.widget-categories-menu ul li a {
    display: block;
    overflow: hidden;
    text-decoration: none;
    font-size: 22px;
    line-height: 27px;
    color: #0D8FE5;
    font-weight: 500;
    transition: .5s;
}

.widget-categories-menu ul li:hover a {
    color: #fff;
}

.widget-categories-menu ul li a span {
    float: right;
}

/* widget contact box */

.widget-contact-box {
    background: url(../image/widget-s-thumb.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    padding: 63px 30px 57px;
    margin-bottom: 40px;
}

.widget-contact-title h4 {
    font-size: 36px;
    line-height: 48px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 27px;
}

.widget-contact-icon {
    width: 81px;
    height: 81px;
    display: inline-block;
    background: #fff;
    line-height: 75px;
    text-align: center;
    border-radius: 50%;
    margin-bottom: 34px;
}

.widget-contact-content h6 {
    font-size: 16px;
    line-height: 48px;
    color: #ededed;
    font-weight: 400;
}

.widget-contact-content h4 {
    font-size: 30px;
    line-height: 48px;
    color: #ededed;
    font-weight: 600;
}

/* service details right bar */

.service-details-thumb {
    overflow: hidden;
    margin-bottom: 33px;
}

.service-details-thumb img {
    width: 100%;
    transition: all 2s ease;
}

.service-details-thumb img:hover {
    transform: scale(1.15);
}

.service-details-title h4 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 12px;
}

.service-detials-discription {
    margin-bottom: 32px;
}

.service-detials-discription p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.service-list-title h4 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    border-bottom: 1px solid #d5d5d5;
    padding: 0px 0 19px;
}

.service-detials-list span {
    font-size: 16px;
    line-height: 32px;
    font-weight: 500;
    padding: 0 28px 0;
    display: block;
    position: relative;
}

.service-detials-list span::before {
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    background-color: #0D8FE5;
    left: 0;
    top: 9px;
}


/*==================================================
 <-- Project Area Css-->
===================================================*/
.project-grid-area {
    padding: 120px 0 90px;
}

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

.protfolio-thumb img {
    width: 100%;
}

.protfolio-thumb {
    position: relative;
    overflow: hidden;
}

.protfolio-thumb img:nth-child(1) {
    transition: transform 0.8s;
}

.protfolio-thumb img:nth-child(2),
.protfolio-thumb img:nth-child(3) {
    position: absolute;
    top: 0;
    z-index: 3;
    transition: transform 1.6s;
}

.protfolio-thumb img:nth-child(2) {
    left: 0;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

.protfolio-thumb img:nth-child(3) {
    right: 0;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.protfolio-single-box:hover .protfolio-thumb img:nth-child(1) {
    transform: scale(1.3);
}

.protfolio-single-box:hover .protfolio-thumb img:nth-child(2) {
    transform: translateX(-700px) skewX(40deg);
}

.protfolio-single-box:hover .protfolio-thumb img:nth-child(3) {
    transform: translateX(700px) skewX(-40deg);
}

.protfolio-images-link {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(14, 19, 23, 0.8);
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(-20%);
    transition: opacity 500ms ease, transform 500ms ease;
}

.protfolio-single-box:hover .protfolio-images-link {
    opacity: 1;
    transform: translateY(0);
}

.protfolio-images-link a {
    color: #fff;
    font-size: 30px;
}


/*==================================================
 <-- Project Details Inner Page Css-->
===================================================*/

.project-detials-area {
    padding: 120px 0 100px;
}

.project-details-thumb {
    margin-bottom: 55px;
    overflow: hidden;
}

.project-details-thumb img {
    width: 100%;
    transition: all 2s ease;
}

.project-details-thumb img:hover {
    transform: scale(1.15);
}

.project-details-title h4 {
    font-size: 30px;
    color: #3c3531;
    font-weight: 600;
}

.porject-detials-discription {
    margin: 25px 0 57px;
}

.porject-detials-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #434141;
    font-weight: 400;
}

.porject-detials-discription.inner {
    margin: -14px 0 0;
}

/*===============================================================
<-- Blog Inner page Css-->
=================================================================*/

.blog-area.inner-page {
    padding: 120px 0 90px;
}

/*===============================================================
<-- Blog Details Inner page Css-->
=================================================================*/

.blog-details-area {
    padding: 122px 0 120px;
}

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

.blog-details-meta {
    margin: 29px 0 26px;
}

.blog-details-meta span {
    opacity: 0.902;
    font-size: 16px;
    line-height: 34px;
    color: #4d4e4f;
    font-weight: 400;
    margin-right: 27px;
}

.blog-details-meta span i {
    font-size: 22px;
    position: relative;
    top: 4px;
    margin-right: 12px;
}

.blog-details-content {
    margin-bottom: 42px;
}

.blog-details-content h4 {
    font-size: 40px;
    line-height: 28px;
    color: #3c3531;
    font-weight: 600;
    margin-bottom: 35px;
}

.blog-details-content p {
    font-size: 16px;
    line-height: 28px;
    color: #3c3531;
    font-weight: 400;
}

.blog-details-tag h6 {
    font-size: 24px;
    color: #3c3531;
    font-weight: 500;
    display: inline-block;
    margin-right: 60px;
}

.blog-details-tag {
    border: 1px solid #0D8FE5;
    padding: 24px 38px;
    margin-bottom: 55px;
}

.blog-details-tag h6 {
    font-size: 24px;
    color: #3c3531;
    font-weight: 500;
    display: inline-block;
    margin-right: 32px;
}

.blog-details-tag a {
    font-size: 16px;
    color: #0D8FE5;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid #eceae5;
    padding: 4px 22px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.blog-details-tag a:hover {
    color: #FFf;
}

.blog-details-tag a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    right: 0;
    margin: auto;
    background: #0D8FE5;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.blog-details-tag a:hover::before {
    width: 100%;
}

.blog-team-thumb {
    float: left;
    margin-right: 30px;
}

.blog-team-content h4 a {
    font-size: 24px;
    color: #3c3531;
    font-weight: 600;
    text-decoration: none;
}

.blog-team-content p {
    font-size: 20px;
    line-height: 30px;
    color: #3c3531;
    font-weight: 400;
    margin: 15px 0 9px;
}

.ba-blog-details-social-icons.two h6 {
    font-size: 18px;
    color: #3c3531;
    font-weight: 400;
    display: inline-block;
    margin-right: 14px;
}

.ba-blog-details-social-icons.two a {
    font-size: 16px;
    margin-right: 10px;
}

.blog-team-thumb {
    float: left;
    margin-right: 30px;
    margin-top: -12px;
}

.row.blog-item {
    padding: 20px 68px 20px;
    border-top: 1px solid #0D8FE5;
    border-bottom: 1px solid #0D8FE5;
}

.blog-item-content h4 {
    font-size: 20px;
    color: #0D8FE5;
    font-weight: 500;
}

.blog-details-item.two {
    margin-left: 90px;
}

.blog-details-area .owl-nav {
    display: none;
}

/* blog details comment */

.blog-details-comment {
    margin-top: 36px;
}

.blog-details-comment h5 {
    font-size: 30px;
    line-height: 28px;
    color: #292930;
    font-weight: 500;
    position: relative;
    margin-bottom: 36px;
}

.blog-details-comment h5::after {
    position: absolute;
    bottom: -10px;
    width: 70px;
    height: 3px;
    background: #0D8FE5;
    content: "";
    left: 0;
}

.blog-comment-list ul li {
    list-style: none;
    margin-bottom: 0;
}

.blog-comment-box {
    position: relative;
}

.blog-comment-box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: #E4E4E4;
    bottom: -30px;
}

.blog-comment-box.inner {
    margin-left: 50px;
}

.blog-comment-box.inner::before {
    display: none;
}

.blog-comment-thumb {
    float: left;
    margin-right: 24px;
    margin-top: 12px;
}

.blog-comment-thumb img {
    border-radius: 4px;
}

.blog-comment-list .title {
    margin-bottom: 5px;
    margin-left: -12px;
}

.blog-comment-list h6.title {
    color: #18191D;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.blog-comment-list span.date {
    margin-left: -13px;
}

.content-main p {
    color: #747474;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin: 10px 0 0;
}

.text-sm-end a {
    display: inline-block;
    text-decoration: none;
    padding: 7px 13px;
    background: #EFEFEF;
    border-radius: 3px;
    color: #102039;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.text-sm-end a:hover {
    color: #fff;
}

.text-sm-end a::before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    right: 0;
    margin: auto;
    background: #0D8FE5;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.text-sm-end a:hover::before {
    width: 100%;
}

/* blog contact box */

.blog-contact-box {
    background: #eff5f4;
    padding: 20px 30px 20px;
}

.blog-contact-title h4 {
    color: #18191D;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 54px;
    position: relative;
}

.blog-contact-title h4::before {
    position: absolute;
    bottom: -10px;
    width: 70px;
    height: 3px;
    background: #0D8FE5;
    content: "";
    left: 0;
}

/* contact form */

.form-box input {
    width: 100%;
    height: 64px;
    background: #ffffff;
    border: none;
    border-radius: 3px;
    padding: 0 17px;
    margin-bottom: 25px;
}

.form-box input::placeholder {
    color: #525459;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.form-box textarea {
    width: 100%;
    height: 145px;
    background: #ffff;
    border: none;
    border-radius: 3px;
    padding: 5px 17px;
    margin-bottom: 25px;
}

.form-box textarea::placeholder {
    color: #525459;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.form-box-button button {
    width: 210px;
    height: 60px;
    border-radius: 3px;
    background-color: #0D8FE5;
    border: 0;
    outline: 0;
    font-size: 19px;
    font-weight: 500;
    color: #fff;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.form-box-button button::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    transform: scale(0.0, 1);
    opacity: 0;
    border-radius: 3px;
    z-index: -1;
    transition: .5s;
}

.form-box-button button:hover::before {
    background: #18191D;
    opacity: 1;
    transform: scale(1, 1);
}

.form-box-button.inner {
    text-align: center;
}

/* widget search box */

.widget_search.box {
    margin-bottom: 30px;
}

.widget_search form {
    position: relative;
}

.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #606060;
    font-weight: 400;
    background: #f8f6f1;
    border: none;
    outline: 0;
}

.widget_search input::placeholder {
    font-size: 16px;
    line-height: 28px;
    color: #868686;
    font-weight: 400;
}

button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #0D8FE5;
    border-radius: 0 3px 3px 0;
}

/* widget recent box */

.widget-recent-box {
    background: #f8f6f1;
    padding: 50px 35px 55px;
    margin-bottom: 30px;
}

.widget-recent-title h4 {
    font-size: 30px;
    color: #0D8FE5;
    font-weight: 600;
    margin-bottom: 40px;
    border-bottom: 1px solid #ece6e6;
    padding: 0 0 14px;
}

.sidber-widget-recent-post {
    background: #ffffff;
    border-radius: 5px;
    padding: 16px 20px;
}

.recent-widget-thumb {
    float: left;
    margin-right: 20px;
    margin-top: 10px;
    overflow: hidden;
}

.recent-widget-thumb img {
    transition: all 2s ease;
}

.sidber-widget-recent-post:hover .recent-widget-thumb img {
    transform: scale(1.15);
}

.recent-widget-meta span {
    font-size: 14px;
    color: #4d4e4f;
    font-weight: 400;
}

.recent-widget-meta span i {
    color: #0D8FE5;
    font-size: 12px;
    margin-right: 8px;
}

.recent-widget-title h4 a {
    font-size: 20px;
    color: #3c3531;
    font-weight: 600;
    text-decoration: none;
    transition: .5s;
}

.sidber-widget-recent-post:hover .recent-widget-title h4 a {
    color: #0D8FE5;
}

/* widget recent menu */
.widget-recent-menu ul li {
    list-style: none;
    margin-bottom: 26px;
    position: relative;
    z-index: 1;
    transition: .5s;
    border-bottom: 1px solid #dddddd;
    padding: 0px 0 10px;
}

.widget-recent-menu ul li::before {
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    transition: all 0.5s linear 0s;
    background-color: #0D8FE5;
    content: "";
    z-index: -1;
}

.widget-recent-menu ul li:hover::before {
    width: 100%;
    right: auto;
    left: 0;
}

.widget-recent-menu ul li a {
    display: block;
    overflow: hidden;
    font-size: 16px;
    color: #4d4e4f;
    font-weight: 400;
    text-decoration: none;
    transition: .5s;
}

.widget-recent-menu ul li a:hover {
    color: #0D8FE5;
}

.widget-recent-menu ul li a span {
    float: right;
}

/* widget tags */

.widget-tags a {
    display: inline-block;
    text-decoration: none;
    padding: 7px 13px;
    background: #fff;
    border-radius: 3px;
    font-size: 17px;
    color: #4d4e4f;
    font-style: normal;
    margin: 11px 5px;
    font-weight: 400;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.widget-tags a:hover {
    color: #fff;
}

.widget-tags a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    right: 0;
    margin: auto;
    background: #0D8FE5;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.widget-tags a:hover:before {
    width: 104%;
}

/*===============================================================
<-- Contact Area Css-->
=================================================================*/
.contact-area {
    padding: 120px 0 110px;
}

.row.contact {
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
    background-color: #eff5f4;
    padding: 110px 35px 70px;
}

.contact-single-box {
    background: #0D8FE5;
    padding: 60px 18px 30px;
}

.contact-title h4 {
    font-size: 36px;
    line-height: 60px;
    color: #ffffff;
    font-weight: 600;
    border-bottom: 1px solid #0D8FE5;
    padding: 0 0 7px;
    margin-bottom: 30px;
}

.contact-items {
    margin-bottom: 30px;
    background: #fff;
    padding: 26px 15px;
}

.contact-icon {
    float: left;
    margin-right: 20px;
    width: 55px;
    height: 59px;
    background-color: #0D8FE5;
    display: inline-block;
    text-align: center;
    line-height: 59px;
}

.contact-icon i {
    color: #fff;
    font-size: 26px;
}

.contact-content h4 {
    font-size: 24px;
    color: #0D8FE5;
    font-weight: 500;
}

.contact-content h6 {
    font-size: 15px;
    line-height: 34px;
    color: #757575;
    font-weight: 400;
}

/* contact box title */

.contact-box-title h4 {
    font-size: 48px;
    line-height: 60px;
    color: #0D8FE5;
    font-weight: 600;
    margin-bottom: 35px;
}

/*===============================================================
<-- Faq Area Css-->
=================================================================*/

.faq-area {
    padding: 120px 0 100px;
}


/* accrodion css */

.accordion li {
    list-style: none;
    position: relative;
    z-index: 1;
    margin-bottom: -7px;
    border-radius: 3px;
}

.accordion li a {
    display: block;
    cursor: pointer;
    padding: 12px 34px 12px;
    text-decoration: none;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f4f9;
}

.accordion li a span {
    font-size: 20px;
    color: #0D8FE5;
    font-weight: 600;
}

.accordion li a i {
    width: 36px;
    height: 36px;
    background: #0D8FE5;
    display: inline-block;
    text-align: center;
    line-height: 38px;
    color: #fff;
}

.accordion a.active {
    background: #f4f4f9;
    border: none;
}

.accordion a.active i {
    color: #fff;
    background: #0D8FE5;
    border: none;
    margin-bottom: 0;
    transform: rotate(90deg);
}

.accordion li p {
    display: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #434141;
    background: #f4f4f9;
    padding: 11px 38px 28px;
    width: 100%;
    margin: 0;
    position: relative;
    top: -24px;
}

.accordion a.active:before {
    display: none;
}

a.active {
    color: #1c1632;
}

ul.accordion ul li a span {
    color: #fff;
}

/*===============================================================
<-- Error Area Css-->
=================================================================*/

.error-area {
    padding: 120px 0 110px;
}

.faq-thumb {
    text-align: center;
}

.Plumbtech-btn.error {
    margin-left: 160px;
}

/*===============================================================
<-- Plumbtech Sidebar Css-->
=================================================================*/

.sidebar-textwidget .contact-info ul {
    padding: 0;
}

.sidebar-group .widget-heading {
    position: absolute;
    top: 55px;
    right: 32px;
}

.sidebar-group .sidebar-widget {
    position: fixed;
    right: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    z-index: 999999;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #FFF;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

.sidebar-group.isActive .sidebar-widget {
    opacity: 1;
    visibility: visible;
    right: 0;
}

.sidebar-textwidget {
    padding: 40px 32px;
}

.close-side-widget i {
    color: #0D8FE5;
    font-size: 30px;
    display: block;
}

.sidebar-widget-container {
    position: relative;
    top: 150px;
    opacity: 0;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sidebar-group.isActive .sidebar-widget-container {
    top: 0px;
    opacity: 1;
    visibility: visible;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sidebar-logo {
    margin: 0 0 50px;
}

.sidebar-textwidget .sidebar-logo a img {
    width: 50%;
}

.sidebar-group .about-box h2 {
    color: #002935;
    font-size: 26px;
    font-weight: 600;
}

.sidebar-group .about-box p {
    display: inline-block;
    color: #fff;
    padding: 15px 0 0;
}

.sidebar-group .contact-info {
    margin-top: 60px;
}

.sidebar-group .contact-info h2 {
    color: #002935;
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: 600;
}

.sidebar-group ul.list-style-one li {
    display: block;
    list-style: none;
    color: #002935;
    margin-top: 8px;
    overflow: hidden;
}

.sidebar-group ul.list-style-one li i {
    font-size: 20px;
    font-weight: 600;
    color: #0D8FE5;
    margin: 0 10px 0 0px;
}

.sidebar-group ul.social-box {
    margin: 58px 0 0;
    padding: 0;
}

.sidebar-group ul.social-box li {
    display: inline-block;
    list-style: none;
    margin: 0 6px 0 0;
}

.sidebar-group ul.social-box li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    background: #0D8FE5;
    color: #FFF;
    text-decoration: none;
    transition: .5s;
    font-size: 18px;
    border-radius: 3px;
}

.sidebar-group ul.social-box li a:hover {
    background: var(--primary-color);
    color: #0D8FE5;
}


/* sidebar menu */

.sidebar-menu {
    position: absolute;
    right: 27px;
    top: 37px;
    display: none;
}

.sidebar-menu a {
    width: 52px;
    height: 52px;
    line-height: 52px;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 26px;
    background: #0D8FE5;
}

.sidebar-widget-menu {
    position: relative;
}

.sidebar-widget-menu ul li {
    list-style: none;
    margin-top: 10px;
    padding: 0 0 14px;
}

.sidebar-widget-menu ul li .home-menu-title h4 {
    text-align: center;
    margin-top: 10px;
}

.sidebar-widget-menu ul li .home-menu-title h4 a {
    font-size: 20px;
    padding: 0px 0;
    font-weight: 500;
    color: #171717;
}

.sidebar-widget-menu ul li .home-menu-title h4 a:hover {
    color: #0D8FE5;
}

.sidebar-widget-menu ul li .home-menu-title h4 a::before {
    display: none;
}



/*
<!-- ============================================================== -->
<!-- Plumbtech Scrollup Section -->
<!-- ============================================================== -->*/
.prgoress_scrollup {
    position: fixed;
    right: 55px;
    bottom: 80px;
    height: 48px;
    width: 48px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 119, 249, 0.2);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

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

.prgoress_scrollup::after {
    position: absolute;
    content: "\F286";
    font-family: bootstrap-icons;
    text-align: center;
    line-height: 46px;
    font-size: 16px;
    color: #0D8FE5;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_scrollup:hover::after {
    color: #0D8FE5;
}

.prgoress_scrollup svg path {
    fill: none;
}

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




@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}


@keyframes loader {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

/*===========================
<-- Plumbtech Loader Css -->
=============================*/

 .loader_bg {
    position: fixed;
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9991;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
}

.preloader__image {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}