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

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




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

.topbar-area {
    padding: 20px 0;
    background: #f4f4f4;
    text-align: center;
    position: relative;
    border-bottom: 1px solid #dddddd;
}

.topbar-area::before {
    position: absolute;
    content: "";
    width: 306px;
    height: 42px;
    background-color: #1685b6;
    left: -11px;
    transform: skew(30deg);
    bottom: -1px;
}

.topbar-area::after {
    position: absolute;
    content: "";
    width: 130px;
    height: 36px;
    background-color: #1685b6;
    left: -9px;
    top: 0;
}

.topbar-inner {
    position: relative;
}

.topbar-inner::before {
    position: absolute;
    content: "";
    width: 306px;
    height: 42px;
    background-color: #1685b6;
    right: -9px;
    transform: skew(30deg);
    bottom: 11px;
}

.topbar-inner::after {
    position: absolute;
    content: "";
    width: 130px;
    height: 36px;
    background-color: #1685b6;
    right: -9px;
    top: 12px;
}

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

.topbar-items ul li {
    display: inline-block;
    margin-right: 84px;
    font-size: 18px;
    color: #003d4d;
    font-weight: 400;
    position: relative;
}

.topbar-items ul li::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 30px;
    background: #dddddd;
    right: -45px;
}

.topbar-items ul li.inner::before {
    display: none;
}

.topbar-items ul li span {
    color: #1685b6;
}

.topbar-items ul li a {
    font-size: 18px;
    color: #003d4d;
    font-weight: 400;
    text-decoration: none;
}

.topbar-items ul li i {
    margin-right: 5px;
    font-size: 20px;
}



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

.header-area {
    position: relative;
}

.header-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
}

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

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

.header-menu ul li a {
    font-size: 18px;
    color: #003d4d;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: .5s;
    padding: 50px 0;
}

.header-menu ul li a:hover {
    color: #1685b6;
}

.header-menu ul li a::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 0;
    background: #1685b6;
    bottom: 50px;
    right: 0;
    transition: .5s;
}

.header-menu ul li a:hover:before {
    width: 100%;
    left: 0;
}

.header-menu ul li a i {
    font-size: 12px;
    margin-left: 5px;
}

/* 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: #FFFF !important;
    z-index: 9999 !important;
    animation-name: slideInDown;
    padding: 0 30px;
}


/* sub menu */

.header-menu ul .sub-menu {
    background: #fff;
    position: absolute;
    top: 125%;
    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 #1685b6;
    opacity: 0;
    z-index: 11;
}

.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;
}

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

.header-menu ul .sub-menu ul li a::before {
    display: none;
}

.header-menu ul li:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    top: 99%;
}


/* mobile menu */

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

/*==================================================
 <-- Living All Btn Css-->
===================================================*/

.Living-btn a {
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
    padding: 17px 52px;
    background-color: #003d4d;
    text-decoration: none;
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 63px;
    max-width: 228px;
    z-index: 1;
}

.Living-btn a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-bottom: 80px solid #1685b6;
    right: -50px;
    border-right: 50px solid transparent;
    transform: translateX(-100%);
    transition: .5s;
    width: 0;
    z-index: -1;
}

.Living-btn a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    border-bottom: 80px solid #1685b6;
    right: -98px;
    border-left: 50px solid transparent;
    transform: translateX(-100%);
    transition: .5s;
    width: 0;
    z-index: -1;
}

.Living-btn a:hover::before {
    transform: translateX(-10%);
    right: 0;
    width: 100%;
}

.Living-btn a:hover::after {
    transform: translateX(19%);
    right: 0;
    width: 100%;
}

/* slider btn */
.Living-btn.slider a {
    background: #1685b6;
}

.Living-btn.slider a:before,
.Living-btn.slider a:after {
    border-bottom: 80px solid #003d4d;
}

.slider-button {
    position: relative;
}

/* about style two btn */

.Living-btn.about2 a {
    background: #1685b6;
}

.Living-btn.about2 a:before,
.Living-btn.about2 a:after {
    border-bottom: 80px solid #003d4d;
}


/*==================================================
 <-- Living Banner Area Css-->
===================================================*/

/* Banner Slider */
.banner-section {
    position: relative;
}

.banner-carousel .slide-item {
    position: relative;
    overflow: hidden;
    min-height: 900px;
}

.banner-carousel .slide-item .image-layer {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 6000ms linear;
    -moz-transition: all 6000ms linear;
    -ms-transition: all 6000ms linear;
    -o-transition: all 6000ms linear;
    transition: all 6000ms linear;
}

.banner-carousel .active .slide-item .image-layer {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
}

/* slide content */

.slider-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42%;
}

.slider-title-shape {
    display: inline-block;
}

.slider-title-shape img {
    width: auto;
}

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

.slider-sub-title h4 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    display: inline-block;
    margin-bottom: 32px;
}

.slider-main-title h1 {
    color: #FFF;
    font-family: Jost;
    font-size: 70px;
    font-weight: 600;
    line-height: 82px;
}

.slider-discripton p {
    color: #dddddd;
    font-family: Jost;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 43px 10px 70px;
    width: 100%;
}

/* search box */

.banner-search-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 62%;
    width: 510px;
    height: 684px;
    background-color: #ffffff;
    padding: 44px 54px 0;
}

.banner-search-box-title h4 {
    font-size: 36px;
    line-height: 46px;
    color: #003d4d;
    font-weight: 600;
    margin-bottom: 30px;
}

.form-group input {
    width: 100%;
    height: 56px;
    border: 1px solid #dbdbdb;
    padding: 0px 20px;
    margin-bottom: 20px;
}

.form-group input:focus {
    border: 1px solid #dbdbdb;
}

.form-group input::placeholder {
    font-size: 15px;
    color: #898989;
    font-weight: 400;
}

.form-group select {
    width: 100%;
    height: 56px;
    border: 1px solid #dbdbdb;
    padding: 0px 20px;
    margin-bottom: 20px;
    outline-color: #dbdbdb;
}

.form-group option:nth-child(1) {
    background: #003d4d;
    color: #fff;
    transition: .5s;
}

.form-group option:nth-child(1):hover {
    background: #1685b6;
}

.form-group option:nth-child(2) {
    background: #003d4d;
    color: #fff;
}

.form-group option:nth-child(3) {
    background: #003d4d;
    color: #fff;
}

.form-group option:nth-child(4) {
    background: #003d4d;
    color: #fff;
}

.form-group option:nth-child(5) {
    background: #003d4d;
    color: #fff;
}

.form-group option:nth-child(6) {
    background: #003d4d;
    color: #fff;
}

.form-group option:nth-child(7) {
    background: #003d4d;
    color: #fff;
}

.form-group button {
    width: 185px;
    height: 64px;
    background-color: #1685b6;
    border: 0;
    outline: 0;
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
    transition: .5s;
}

.form-group button:hover {
    background: #003d4d;
}

/*==================================================
 <-- Living All Section Title Css-->
===================================================*/

.section-sub-thumb {
    display: inline-flex;
    align-items: center;
}

.section-sub-titile {
    display: inline-block;
    margin: 0 10px 0;
}

.section-sub-titile h4 {
    font-size: 20px;
    color: #1685b6;
    font-weight: 500;
    margin-bottom: 30px;
}

.section-main-title h2 {
    font-size: 48px;
    color: #003d4d;
    font-weight: 600;
    margin-bottom: 48px;
}

/* about section title */

.section-sub-titile.about h4 {
    margin-bottom: 19px;
}

.section-main-title.about h2 {
    margin-bottom: 20px;
}

/* testi section title */
.section-sub-titile.testi h4 {
    color: #fff;
}

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


/*==================================================
 <-- Living Feature Area Css-->
===================================================*/

.feature-area {
    padding: 120px 0 118px;
}

.feature-single-box {
    text-align: center;
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.08));
    background-color: #ffffff;
    padding: 58px 36px 54px;
    transition: .5s;
    position: relative;
    top: 0;
}

.feature-single-box:hover {
    top: -10px;
}

.feauture-icon {
    border: 1px dashed #dddddd;
    display: inline-block;
    padding: 23px 40px;
    margin-bottom: 35px;
}

.feauture-content h4 a {
    font-size: 32px;
    color: #003d4d;
    font-weight: 600;
    text-decoration: none;
}

.feauture-content h4 a:hover {
    color: #1685b6;
}

.feauture-content p {
    font-size: 18px;
    line-height: 24px;
    color: #5b5858;
    font-weight: 400;
    margin: 15px 0 28px;
}


.feature-btn a {
    display: flex;
    justify-content: space-around;
    background: #f2f6f7;
    width: 345px;
    height: 60px;
    align-items: center;
    margin: auto;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: .5s;
}

.feature-single-box:hover .feature-btn a {
    color: #fff;
}

.feature-btn a::before {
    position: absolute;
    width: 250%;
    height: 200%;
    background: #1685b6;
    content: "";
    transition-duration: 800ms;
    top: 110%;
    left: 44%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: -1;
}

.feature-single-box:hover .feature-btn a::before {
    top: -40%
}



/*==================================================
 <-- Living Service Area Css-->
===================================================*/

.service-area {
    padding: 120px 0 118px;
    background: #f8f8f8;
}

.service-single-box {
    margin: 10px;
}

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

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

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

.service-rate {
    position: absolute;
    bottom: 0;
}

.service-rate h4 {
    font-size: 24px;
    color: #ffffff;
    font-weight: 600;
    background: #1685b6;
    padding: 8px 24px;
}

.service-rate span {
    font-size: 18px;
    font-weight: 400;
}

.service-content {
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.0));
    background-color: #ffffff;
    padding: 45px 22px 28px;
}

.service-titile h4 a {
    font-size: 25px;
    color: #003d4d;
    font-weight: 600;
    text-decoration: none;
    transition: .5s;
}

.service-titile h4 a:hover {
    color: #1685b6;
}

.service-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #5b5858;
    font-weight: 400;
    margin: 15px 0 18px;
}

.service-faciliti ul li {
    list-style: none;
    display: inline-block;
    margin-right: 8px;
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
    background-color: rgba(255, 255, 255, 0.7);
    padding: 4px 8px;
    margin-bottom: 25px;
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    position: relative;
}

.service-faciliti ul li::before {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: #1685b6;
    bottom: 0;
    right: 0;
    transition: all 2s ease;
}

.service-single-box:hover .service-faciliti ul li::before {
    width: 100%;
    left: 0;
}

.service-faciliti ul li::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 0;
    background: #1685b6;
    right: 0;
    bottom: 0;
    transition: all 2s ease;
}

.service-single-box:hover .service-faciliti ul li::after {
    height: 100%;
    top: 0;
}

.service-icon-thumb {
    float: left;
    margin-right: 10px;
    margin-top: -2px;
}

.service-faciliti ul li span {
    font-size: 18px;
    color: #5b5858;
    font-weight: 400;
}

.service-adress {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-location span {
    font-size: 18px;
    color: #5b5858;
    font-weight: 400;
}

.service-location span i {
    color: #1685b6;
}

.service-icon span i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #dedede;
    display: inline-block;
    line-height: 36px;
    text-align: center;
    color: #1685b6;
    margin-left: 5px;
}

/* owl dots css */

.owl-dots {
    text-align: center;
    margin-top: 54px;
}

.owl-dot {
    margin-right: 9px;
    height: 17px;
    width: 17px;
    background: #d2d4d5;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
}

.owl-dot.active {
    height: 12px;
    width: 40px;
    background: #1685b6;
    border-radius: 6px;
}


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

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

.about-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #003d4d;
    font-weight: 400;
    border-bottom: 1px solid #f1f1f1;
    padding: 0 0 39px;
    margin-bottom: 37px;
}

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

.about-icon {
    width: 74px;
    height: 71px;
    border-radius: 8px;
    background-color: #1685b6;
    line-height: 69px;
    text-align: center;
    float: left;
    margin-right: 30px;
    margin-top: 4px;
}

.about-text h4 {
    font-size: 24px;
    line-height: 24px;
    color: #003d4d;
    font-weight: 500;
    margin-bottom: 9px;
}

.about-text p {
    font-size: 16px;
    line-height: 24px;
    color: #4e4e4e;
    font-weight: 400;
}

.about-shape {
    overflow: hidden;
}

.about-shape img {
    width: 100%;
    margin-bottom: 30px;
    transition: all 2s ease;
}

.about-shape img:hover {
    transform: scale(1.15);
}

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

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

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


/*==================================================
 <-- Living Choose Us Area Area Css-->
===================================================*/
.choose-us-area {
    position: relative;
    z-index: 1;
    padding: 0 0 41px;
}

.choose-us-area::before {
    position: absolute;
    content: "";
    background: url(../image/choose-shape.png);
    width: 55%;
    height: 100%;
    z-index: -1;
    right: -38px;
    background-size: contain;
    background-repeat: no-repeat;
}

.choose-us-area::after {
    position: absolute;
    content: "";
    background: url(../image/choose-thumb.png);
    width: 47%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
}

.choose-us-left {
    margin-top: 130px;
}

.choose-us-box {
    background: #ffffff;
    padding: 20px 20px 1px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.choose-us-box::before {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    background: #1685b6;
    top: 0;
    left: 0;
    z-index: -1;
    transition: .5s;
}

.choose-us-box:hover::before {
    width: 100%;
}

.choose-us-box.active::before {
    width: 100%;
}

.choose-icon-thumb {
    float: left;
    margin-right: 43px;
    margin-top: -5px;
    position: relative;
}

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

.choose-us-box:hover .choose-icon-thumb img {
    filter: brightness(0)invert(1);
}

.choose-icon-thumb::before {
    position: absolute;
    content: "";
    height: 44px;
    width: 1px;
    background: #d9d9d9;
    right: -23px;
}

.choose-content p {
    font-size: 20px;
    line-height: 28px;
    color: #003d4d;
    font-weight: 500;
    transition: .5s;
}

.choose-us-box:hover .choose-content p {
    color: #FFF;
}

.choose-content.active p {
    color: #fff;
}

/*==================================================
 <-- Living Apartment Area Area Css-->
===================================================*/
.apartment-area {
    padding: 120px 0 118px;
}

.apartment-single-box.inner {
    position: relative;
    margin-top: 60px;
}

.apartmnet-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

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

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

.apartment-text {
    position: absolute;
    bottom: -105px;
    text-align: center;
    width: 321px;
    height: 100px;
    border-radius: 0px 0px 8px 8px;
    background-color: #1685b6;
    padding: 20px 0;
    transition: .5s;
    left: -7px;
}

.apartment-single-box:hover .apartment-text {
    bottom: 0;
}

.apartment-text h4 {
    font-size: 24px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 500;
    margin-left: 94px;
    transition: all 2s ease;
}

.apartment-single-box:hover .apartment-text h4 {
    margin-left: 0;
}

.apartment-text h6 {
    font-size: 20px;
    line-height: 36px;
    color: #ffffff;
    font-weight: 400;
    margin-right: 94px;
    transition: all 2s ease;
}

.apartment-single-box:hover .apartment-text h6 {
    margin-right: 0;
}


/*==================================================
 <-- Living Portfolo Area Area Css-->
===================================================*/

.portfolio-area {
    padding: 120px 0 118px;
    background-color: #f2f6f7;
}


.project-menu {
    margin-bottom: 60px;
    display: inline-block;
}

ul.project-menu {
    list-style: none;
}

.project-menu li a {
    display: inline-block;
    padding: 20px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
}

.project-menu .active a {
    position: relative;
    color: #fff;
    z-index: 1;
    text-decoration: underline;
    background: #1685b6;
}

/* portfio single box */

.portfolio-single-box {
    position: relative;
}

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

.portfolio-thumb::before {
    position: absolute;
    content: "";
    height: 310px;
    width: 90%;
    background: #fff;
    bottom: 0;
    clip-path: ellipse(53% 62% at 50% -21%);
    transform: rotate(180deg);
    left: 0;
    right: 0;
    margin: auto;
}

.portfolio-thumb::after {
    position: absolute;
    content: "";
    height: 0;
    width: 90%;
    background: #1685b6;
    bottom: 0;
    clip-path: ellipse(53% 62% at 50% -21%);
    transform: rotate(180deg);
    left: 0;
    right: 0;
    margin: auto;
    transition: .5s;
    z-index: 9;
}

.portfolio-single-box:hover .portfolio-thumb::after {
    height: 310px;
}

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

.portfolio-icon {
    position: absolute;
    top: 15px;
    right: 20px;
}

.portfolio-icon a {
    width: 81px;
    height: 81px;
    background-color: #ffffff;
    text-align: center;
    line-height: 88px;
    font-size: 38px;
}

.portfolio-icon a i {
    border: 1px dashed #003d4d;
    padding: 6px 12px 0;
}

.portfolio-content {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 99;
}

.portfolio-content h4 a {
    font-size: 20px;
    line-height: 30px;
    color: #1685b6;
    font-weight: 400;
    text-decoration: none;
    transition: .5s;
}

.portfolio-single-box:hover .portfolio-content h4 a {
    color: #fff;
}

.portfolio-content h6 {
    font-size: 26px;
    line-height: 46px;
    color: #003d4d;
    font-weight: 600;
    transition: .5s;
}

.portfolio-single-box:hover .portfolio-content h6 {
    color: #fff;
}


/*==================================================
 <-- Living Apartment Area Area Css-->
===================================================*/

.apartment-area {
    padding: 118px 0 120px;
}

/* apartment box css */

.apartment-box {
    background: #f2f6f7;
    padding: 70px 40px 75px;
}

.apartment-content h2 {
    font-size: 36px;
    line-height: 46px;
    color: #003d4d;
    font-weight: 600;
}

.apartment-content p {
    font-size: 18px;
    line-height: 50px;
    color: #5b5858;
    font-weight: 400;
}

.form-box.inner {
    position: relative;
}

.form-box.inner input {
    background: none;
    border: none;
    border-bottom: 1px solid #b5c3c6;
    border-radius: 0;
    outline: 0;
    margin-bottom: 50px;
}

.form-box.inner input::placeholder {
    font-size: 16px;
    line-height: 30px;
    color: #5b5858;
    font-weight: 400;
    
}

.form-box.inner i {
    position: absolute;
    top: 15px;
    right: 0;
    font-size: 22px;
}

.form-box.inner textarea {
    background: none;
    border: none;
    outline: 0;
    border-bottom: 1px solid #b5c3c6;
    height: 76px;
    border-radius: 0;
    margin-bottom: 48px;
}

.form-box.inner textarea::placeholder {
    font-size: 16px;
    line-height: 30px;
    color: #5b5858;
    font-weight: 400;
}

.checkbox-box input {
    height: 20px;
    width: 20px;
    border: 1px solid #b5c3c6;
    background: #b5c3c6;
    position: relative;
    top: 5px;
}


.checkbox-box label {
    padding-left: 5px;
    font-size: 16px;
    color: #5b5858;
    font-weight: 400;
}


/*==================================================
 <-- Living Video Area Area Css-->
===================================================*/

.video-area {
    background: url(../image/video-bg.jpg);
    height: 520px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.single-video {
    text-align: center;
}

.video-icon a {
    font-size: 24px;
    font-weight: 500;
    text-decoration: none;
    color: #ffff;
    width: 91px;
    height: 76px;
    border: 1px solid #fff;
    display: inline-block;
    line-height: 72px;
    text-align: center;
    box-shadow: 0 0 rgba(255, 255, 255, 0.1),0 0 0 15px rgba(255, 255, 255, 0.1),0 0 0 30px rgba(255, 255, 255, 0.1);
    animation: ripple-wave1 1s linear infinite;
    animation-play-state: running;
    -webkit-animation: ripple-wave1 1s linear infinite;
    transition: .5s;
}

.video-icon a:hover{
    background: #1685b6;
  }

@keyframes ripple-wave1{
    to {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.1),0 0 0 30px rgba(255, 255, 255, 0.1),0 0 0 45px rgba(255, 255, 255, 0.02);
    }
  }

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

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

.blog-items-box {
    border-radius: 3px;
    position: relative;
    filter: drop-shadow(0.5px 0.866px 25.5px rgba(0, 0, 0, 0.08));
    background-color: #ffffff;
    overflow: hidden;
    padding: 22px 12px 33px;
}

.blog-thumb {
    overflow: hidden;
    border-radius: 3px;
}

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

.blog-items-box:hover .blog-thumb img {
    transform: scale(1.15);
}

.blog-content {
    padding: 0 29px 0;
}

.blog-meta {
    margin: 25px 0 12px;
}

.blog-meta span {
    font-size: 16px;
    line-height: 34px;
    font-weight: 400;
    padding-right: 50px;
}

.blog-meta span i {
    color: #1685b6;
}

.blog-title {
    margin-bottom: 18px;
    position: relative;
}

.blog-title h4 a {
    font-size: 24px;
    line-height: 34px;
    text-decoration: none;
    color: #292930;
    font-weight: 500;
    transition: .5s;
}

.blog-items-box:hover .blog-title h4 a {
    color: #1685b6;
}

.blog-bottom-shape {
    display: inline-block;
    margin-right: 15px;
}

.blog-bottom-title {
    margin-right: 60px;
    display: inline-block;
}

.blog-bottom-title h5 {
    font-size: 18px;
}

.blog-btn {
    display: inline-block;
}

.blog-btn a {
    font-size: 18px;
    line-height: 34px;
    text-decoration: underline;
    color: #1685b6;
    font-weight: 500;
}

.blog-btn a i {
    margin-left: 8px;
}

/*==================================================
 <-- Living Brand Area Css-->
===================================================*/

.brand-area {
    position: relative;
    padding: 0 0 120px;
}

.brand-area::before {
    position: absolute;
    content: "";
    width: 775px;
    height: 1px;
    background-color: #e1e1e1;
    top: 16px;
}

.brand-area::after {
    position: absolute;
    content: "";
    width: 775px;
    height: 1px;
    background-color: #e1e1e1;
    top: 16px;
    right: 0;
}


.brand-title h4 {
    text-align: center;
    font-size: 24px;
    line-height: 32px;
    color: #696969;
    font-weight: 500;
    position: relative;
}

.brand-thumb {
    position: relative;
}

.brand-thumb img {
    width: auto !important;
    transition: .5s;
}

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

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

.footer-area {
    background: url(../image/footer-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 116px 0 0px;
    position: relative;
}

/* footer widget */

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

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

.footer-wiget-title h4 {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
    padding: 0 0 27px;
    position: relative;
}

.footer-wiget-title h4::before {
    position: absolute;
    content: "";
    width: 100px;
    height: 1px;
    background: #1685b6;
    bottom: 17px;
}

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

.footer-socilal-title h4::before {
    position: absolute;
    content: "";
    width: 3px;
    height: 30px;
    background: #1685b6;
    left: 0px;
}

/* 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;
    text-align: center;
    display: inline-block;
    border: 1px dashed #1a3851;
    font-size: 16px;
    color: #FFF;
    transition: .5s;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.footer-social ul li a:hover i {
    color: #1685b6;
    border: 1px dashed #1685b6;
}

.footer-social ul li a i::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0px;
    height: 100%;
    content: "";
    bottom: 0;
    background: #FFF;
    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: 50px;
    color: #ffffff;
}

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

.footer-wiget-menu ul li a i {
    color: #1685b6;
}

.footer-widget-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #c1c1c1;
    font-weight: 400;
    margin: 12px 0 48px;
}

.form-field {
    position: relative;
}

.form-field input {
    background: #ffff;
    outline: 0;
    border: 0;
    border-bottom: 1px solid #fff;
    width: 270px;
    height: 64px;
    padding: 0 18px;
}

.form-field input::placeholder {
    font-size: 16px;
    line-height: 52px;
    color: #939393;
    font-weight: 400;
}

button.newsletter-button {
    top: 4px;
    position: absolute;
    right: 52px;
}

button.newsletter-button i {
    width: 54px;
    height: 54px;
    display: inline-block;
    border: none;
    outline: none;
    line-height: 54px;
    color: #FFF;
    background: #1685b6;
}

.row.line {
    border-top: 1px dotted #1685b6;
    padding: 18px 0 8px;
}

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

.copyright-text p {
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}

.copyright-text p a {
    color: #1685b6;
}



/*===============================================================
<-- Home Page Two Css-->
=================================================================*/

/* BANNER AREA CSS */

.banner-area {
    position: relative;
    height: 900px;
    z-index: 1;
}

.banner-area::before {
    position: absolute;
    content: "";
    width: 1012px;
    height: 100%;
    background: #f2f6f7;
    z-index: -1;
}

.slider-sub-title.style-two h4 {
    color: #003d4d;
    font-size: 20px;
    margin-bottom: 20px;
}

.slider-main-title.style-two h1 {
    color: #003d4d;
    font-size: 90px;
    line-height: 102px;
}

.slider-discripton.style-two p {
    color: #5b5858;
    width: 83%;
    margin: 27px 0 43px;
}

/* counter box */

.counter-content h4 {
    font-size: 24px;
    line-height: 24px;
    color: #003d4d;
    font-weight: 500;
    display: inline-block;
}

.counter-content span {
    font-size: 24px;
    color: #003d4d;
    position: relative;
    top: -2px;
    left: -5px;
}

.counter-content p {
    font-size: 20px;
    line-height: 24px;
    color: #5b5858;
    font-weight: 500;
}

/* banner slider */

.banner-slider {
    position: relative;
    left: 35%;
}

/* owl css */

.banner-area .owl-dots {
    position: absolute;
    bottom: -1px;
    width: 504px;
    height: 176px;
    background-color: #f2f6f7;
    line-height: 176px;
    text-align: center;
}

.banner-area .owl-dot.active {
    height: 17px;
    width: 17px;
    background: #1685b6;
    border-radius: 50%;
}

/*===============================================================
<-- About Style Two Css-->
=================================================================*/

.about-shape3 {
    position: absolute;
    bottom: 47px;
    left: 27px;
    z-index: -1;
}

.about-shape3 img {
    width: 95%;
}

/* about list */

.about-list {
    margin-bottom: 40px;
}

.about-list ul li {
    list-style: none;
    opacity: 0.949;
    font-size: 20px;
    font-weight: 500;
    color: #003d4d;
    margin-bottom: 17px;
    position: relative;
    padding: 0 25px;
}

.about-list ul li::before {
    position: absolute;
    content: "";
    width: 9px;
    height: 9px;
    background-color: #2393c3;
    left: 0;
    bottom: 8px;
}

/* process bar */

/* process bar css */

.process-ber-plugin {
    margin-bottom: 62px;
}

span.process-bar {
    position: relative;
    font-size: 24px;
    color: #003d4d;
    font-weight: 500;
}

.barfiller {
    width: 530px;
    height: 13px;
    position: relative;
    margin-bottom: 25px;
    margin-top: 15px;
    background-color: #003d4d;
}

.barfiller .tipWrap {
    display: none;
}

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

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

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

span.fill {
    background: #1685b6 !important;
    transform: skewX(45deg);
}

/* about info */

.about-info {
    display: inline-flex;
    align-items: center;
}

.about-bottom {
    display: inline-flex;
    align-items: center;
    margin-left: 46px;
}

.about-bottom-shape {
    margin-right: 26px;
}

.about-content h5 {
    font-size: 22px;
    color: #003d4d;
    font-weight: 500;
    margin-bottom: 5px;
}

.about-content span {
    font-size: 16px;
    color: #5b5858;
    font-weight: 400;
}


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

.team-area {
    padding: 118px 0 210px;
}

.team-single-box {
    position: relative;
    background: #f2f6f7;
    padding: 32px 20px 0px;
    display: inline-block;
}

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

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

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

.team-social-icon {
    position: absolute;
    top: 100px;
    right: 15px;
}

.team-social-icon ul li {
    list-style: none;
    display: block;
    margin-bottom: 14px;
}

.team-social-icon ul li a {
    font-size: 22px;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    display: inline-block;
    line-height: 40px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: .5s;
}

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

.team-social-icon ul li a::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 0px;
    height: 100%;
    content: "";
    bottom: 0;
    background: #1685b6;
    z-index: -1;
    transition: .5s;
    margin: auto;
}

.team-social-icon ul li a:hover::before {
    width: 100%;
    left: 0;
}

.team-content {
    padding: 22px 59px;
}

.team-content h4 a {
    font-size: 25px;
    line-height: 30px;
    color: #003d4d;
    font-weight: 600;
    text-decoration: none;
    transition: .5s;
}

.team-single-box:hover .team-content h4 a {
    color: #1685b6;
}

.team-content h6 {
    font-size: 16px;
    line-height: 37px;
    color: #5b5858;
    font-weight: 400;
}


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

.video-slider {
    background: #003d4d;
    height: 537px;
}

.video-item {
    background: url(../image/video-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 710px;
    position: relative;
    top: -86px;
}

.slide-video {
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    left: 50%;
}

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

.owl-prev i {
    width: 52px;
    height: 52px;
    border: 1px dotted #1585b5;
    display: inline-block;
    text-align: center;
    line-height: 52px;
    font-size: 20px;
    color: #fff;
    transition: .5s;
}

.owl-prev:hover i {
    background: #fff;
    color: #1585b5;
}

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

.owl-next i {
    width: 52px;
    height: 52px;
    border: 1px dotted #1585b5;
    display: inline-block;
    text-align: center;
    line-height: 52px;
    color: #fff;
    font-size: 20px;
    transition: .5s;
}

.owl-next:hover i {
    background: #fff;
    color: #1585b5;
}



/*===============================================================
<-- Service Area Style Two Css-->
=================================================================*/

.service-area.style-two {
    padding: 116px 0 90px;
}

.service-items-box {
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
    background-color: #ffffff;
    padding: 40px 30px 40px;
    margin-bottom: 30px;
    position: relative;
    top: 0;
    transition: .5s;
}

.service-items-box:hover {
    top: -10px;
}

.service-items-icon {
    height: 73px;
    width: 73px;
    background: #f2f6f7;
    text-align: center;
    line-height: 70px;
    margin-bottom: 26px;
}

.service-items-content h4 a {
    font-size: 28px;
    color: #1685b6;
    font-weight: 600;
    text-decoration: none;
    transition: .5s
}

.service-items-box:hover .service-items-content h4 a {
    color: #003d4d;
}

.service-items-content p {
    font-size: 16px;
    line-height: 24px;
    color: #5b5858;
    font-weight: 400;
    margin: 14px 0 20px;
    border-bottom: 1px solid #f2f6f7;
    padding: 0px 0 22px;
}

.service-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-btn a {
    font-size: 18px;
    line-height: 24px;
    color: #003d4d;
    font-weight: 500;
    text-decoration: none;
    transition: .5s;
}

.service-items-box:hover .service-btn a {
    color: #1685b6;
}

.service-btn i {
    color: #1685b6;
    font-size: 20px;
    transition: .5s;
    position: relative;
    left: 0;
}

.service-items-box:hover .service-btn i {
    color: #003d4d;
    left: 10px;
}


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

.testi-area {
    background: url(../image/testi-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 116px 0 122px;
}

.testi-itmes-box {
    background: #f2f6f7;
    border-radius: 0px 60px 0px 60px;
    position: relative;
    padding: 38px 30px 65px;
    position: relative;
    z-index: 1;
}

.testi-itmes-box::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #1685b6;
    border-radius: 0px 60px 0px 60px;
    clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
    z-index: -1;
    transition: .5s;
}

.testi-itmes-box:hover::after {
    clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
}

.testi-items {
    border-bottom: 1px solid #e4e4e4;
    padding: 17px 0 33px;
    margin-bottom: 36px;
}

.testi-thumb {
    float: left;
    margin-right: 18px;
    margin-top: -10px;
}

.testi-title h4 {
    font-size: 32px;
    color: #003d4d;
    font-weight: 600;
    transition: .5s;
}

.testi-itmes-box:hover .testi-title h4 {
    color: #fff;
}

.testi-title span {
    font-size: 17px;
    line-height: 32px;
    color: #5b5858;
    font-weight: 400;
    transition: .5s;
}

.testi-itmes-box:hover .testi-title span {
    color: #fff;
}

.testi-content p {
    font-size: 20px;
    line-height: 36px;
    color: #5b5858;
    font-weight: 400;
    transition: .5s;
}

.testi-itmes-box:hover .testi-content p {
    color: #fff;
}

.testi-icon {
    position: absolute;
    right: 32px;
    bottom: 14px;
}

.testi-icon i {
    font-size: 100px;
    opacity: 0.400;
    transition: .5s;
}

.testi-itmes-box:hover .testi-icon i {
    color: #fff;
}


/*===============================================================
<-- Abou Area Style Three  Css-->
=================================================================*/

.about-skill h4 {
    font-size: 18px;
    color: #5b5858;
    font-weight: 400;
    border: 1px solid #e4e4e4;
    padding: 18px 35px;
    position: relative;
    z-index: 1;
    transition: .5s;
    margin-bottom: 20px;
}

.about-skill h4:hover {
    color: #ffff;
}

.about-skill h4::before {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    background: #1585b5;
    top: 0;
    right: 0;
    z-index: -1;
    transition: .5s;
}

.about-skill h4:hover::before {
    width: 100%;
    left: 0;
}

.about-skill h4 i {
    font-size: 12px;
    width: 22px;
    height: 22px;
    line-height: 21px;
    background: #1585b5;
    display: inline-block;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    margin-right: 9px;
    position: relative;
    top: -3px;
}


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

.catagori-area {
    padding: 115px 0 0px;
    background-color: #003d4d;
}

.catagori-search-box {
    filter: drop-shadow(0px 1px 20px rgba(0, 0, 0, 0.08));
    background-color: #ffffff;
    padding: 33px 70px 46px;
    margin-bottom: -67px;
}

.catagori-search-title h4 {
    font-size: 22px;
    line-height: 82px;
    color: #003d4d;
    font-weight: 500;
    position: relative;
    margin-bottom: 36px;
}

.catagori-search-title h4::before {
    position: absolute;
    content: "";
    width: 430px;
    height: 1px;
    background-color: #e1e1e1;
    bottom: 0px;
}

.catagori-search-title h4::after {
    position: absolute;
    content: "";
    width: 180px;
    height: 4px;
    background-color: #1685b6;
    bottom: -1px;
    left: 50px;
}

.catagori-title h4 {
    font-size: 22px;
    color: #003d4d;
    font-weight: 500;
    margin-bottom: 25px;
}

.form-group.catagori {
    position: relative;
    top: 48px;
}

.form-group.catagori button {
    height: 60px;
}


/*===============================================================
<-- Blog  Area Style Two Css-->
=================================================================*/
.blog-area.style-two {
    padding: 180px 0 265px;
}

.blog-items-box.style-two {
    border-radius: 0;
    padding: 0;
    background: none;
    filter: none;
    overflow: inherit;
}

.blog-content.style-two {
    border-radius: 10px;
    filter: drop-shadow(1.5px 2.598px 3.5px rgba(0, 0, 0, 0.1));
    background-color: #ffffff;
    position: absolute;
    bottom: -144px;
    width: 374px;
    height: 217px;
    left: 0;
    right: 0;
    margin: auto;
}

.blog-title.style-two {
    margin-bottom: 40px;
}

.blog-title.style-two h4 a {
    font-size: 23px;
    color: #003d4d;
    font-weight: 600;
}

.blog-meta.style-two {
    margin: 33px 0 5px;
}

.blog-meta.style-two span {
    color: #003d4d;
    font-weight: 500;
}

.blog-meta.style-two span i {
    color: #003d4d;
}

.blog-button {
    display: inline-block;
    margin-right: -13px;
}

.blog-button a {
    font-size: 18px;
    color: #003d4d;
    font-weight: 400;
    text-decoration: none;
    border-radius: 10px;
    background-color: #f2f6f7;
    padding: 13px 24px;
    position: relative;
    transition: .5s;
}

.blog-button a:hover {
    color: #ffff;
}

.blog-button a::before {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    background: #1685b6;
    border-radius: 10px;
    transition: .5s;
}

.blog-button a:hover::before {
    width: 100%;
    left: 0;
}

.blog-button.two a {
    background: #e7e8e3;
}

.blog-button a i {
    position: relative;
    top: 3px;
}

/*===============================================================
<-- Footer Style Two Css-->
=================================================================*/

.footer-content h2 {
    font-size: 36px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 27px;
}

.footer-content p {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
}

.footer-btn {
    margin-left: 77px;
}



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


.breatcome-area {
    background: url(../image/bratcome-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: #1685b6;
    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:hover{
    color: #003d4d;
}

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

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

/* team*/
.team-area.inner-page {
    padding: 110px 0 122px;
}

/* blog */

.blog-area.style-two.inner-page {
    padding: 120px 0 265px;
}

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

.team-area.inner-two {
    padding: 118px 0 122px;
}

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

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

/*==================================================
 <-- 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: #1685b6;
    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: #003d4d;
    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;
}

/* widget pdf btn */

.widget-download-btn a {
    font-size: 24px;
    color: #ffffff;
    font-weight: 600;
    background: #1685b6;
    text-decoration: none;
    padding: 22px 81px;
    transition: .5s;
}

.widget-download-btn a:hover{
    background: #003d4d;
}

.widget-download-btn a i {
    font-size: 38px;
    position: relative;
    top: 4px;
}

/* 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;
    color: #003d4d;
    font-weight: 600;
    margin-bottom: 12px;
}

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

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

.service-list-title h4 {
    font-size: 24px;
    color: #003d4d;
    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;
    color: #003d4d;
    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: #1585b5;
    left: 0;
    top: 9px;
}

/*==================================================
 <-- Project Grid Inner Page Css-->
===================================================*/
.project-grid-area {
    padding: 120px 0 94px;
}

.project-grid-thumb {
    position: relative;
    overflow: hidden;
    margin-bottom: 29px;
}

.project-grid-thumb img {
    transition: all 2s ease;
}

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

.project-grid-content {
    position: absolute;
    bottom: -100px;
    width: 554px;
    height: 128px;
    background-color: #ebebeb;
    padding: 20px 28px 0;
    left: 16px;
    border-radius: 0px 30px 0px 0px;
    opacity: 0;
    transition: .5s;
}

.project-grid-thumb:hover .project-grid-content{
    bottom: 10px;
    opacity: 1;
}

.project-grid-content h4 a {
    font-size: 26px;
    line-height: 52px;
    color: #003d4d;
    font-weight: 600;
    text-decoration: none;
    transition: .5s;
}

.project-grid-content h4 a:hover{
    color: #1685b6;
}

.project-grid-content p {
    font-size: 18px;
    color: #003d4d;
    font-weight: 400;
}

.project-grid-icon {
    position: absolute;
    top: -50px;
    right: 20px;
    opacity: 0;
    transition: all 2s ease;
}

.project-grid-thumb:hover .project-grid-icon {
    top: 20px;
    opacity: 1;
}

.project-grid-icon a {
    color: #fff;
    font-size: 32px;
    width: 90px;
    height: 90px;
    background-color: #1685b6;
    line-height: 90px;
    text-align: center;
    border-radius: 30px 0px 0px 0px;
    transition: .5s;
    display: inline-block;
}

.project-grid-icon a:hover{
    background: #fff;
    color: #1685b6;
}

/*==================================================
 <-- 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: #003d4d;
    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;
}

/* 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: #003d4d;
    font-weight: 600;
}

.accordion li a i {
    width: 36px;
    height: 36px;
    background: #003d4d;
    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: #1685b6;
    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;
}

/*==================================================
 <-- Project 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;
}

/* 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: #003d4d;
    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: 40px;
    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: #1685b6;
    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;
}

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

.as-pagination {
    margin-top: 18px;
}

.as-pagination ul {
    list-style: none;
}

.as-pagination ul li {
    display: inline-block;
}

.as-pagination ul li a {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    border:  1px solid #C8C8C8;;
    height: 41px;
    width: 41px;
    line-height: 41px;
    text-align: center;
    border-radius: 50%;
    margin-left: 5px;
    transition: .5s;
    text-decoration: none;
    position: relative;
    transition: .5s;
}

.as-pagination ul li a:hover {
    color: #ffffff;
}

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

.as-pagination ul li a:hover::before {
    transform: scale(1);
}


/*===============================================================
<-- 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: #003d4d;
    font-weight: 600;
    margin-bottom: 35px;
}

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

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

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

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

.blog-details-tag a {
    font-size: 16px;
    color: #003d4d;
    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: #1685b6;
    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: #003d4d;
    font-weight: 600;
    text-decoration: none;
}

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

.ba-blog-details-social-icons.two h6 {
    font-size: 18px;
    color: #1685b6;
    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 #076d88;
    border-bottom: 1px solid #076d88;
}

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

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

.blog-details-area .owl-prev {
    top: 0px;
    left: -58px;
}

.blog-details-area .owl-next {
    top: 0px;
    right: -58px;
}

.blog-details-area .owl-prev i {
    background: #003d4d;
}

.blog-details-area .owl-next i {
    background: #003d4d;
}

/* 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: #1685b6;
    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: #1685b6;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

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

/* blog contact box */

.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: #1685b6;
    content: "";
    left: 0;
}

/* contact form */

.form-box input {
    width: 100%;
    height: 55px;
    background:  #f8f6f1;
    border: 1px solid #DDD;
    border-radius: 3px;
    padding: 0 17px;
    margin-bottom: 25px;
}

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

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

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

.form-box-button button {
    width: 210px;
    height: 60px;
    border-radius: 3px;
    background-color: #1685b6;
    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: #1685b6;
    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: #003d4d;
    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 30px;
}

.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: #1685b6;
    font-size: 12px;
    margin-right: 8px;
}

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

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

/* 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: #1685b6;
    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: #1685b6;
}

.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: #1685b6;
    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: #ffffff;
    padding: 110px 35px 70px;
}

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

.contact-title h4 {
    font-size: 36px;
    line-height: 60px;
    color: #ffffff;
    font-weight: 600;
    border-bottom: 1px solid #38a8da;
    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: #003d4d;
    display: inline-block;
    text-align: center;
    line-height: 59px;
}

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

.contact-content h4 {
    font-size: 24px;
    color: #003d4d;
    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: #003d4d;
    font-weight: 600;
    margin-bottom: 35px;
}

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

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

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

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

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

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

/*===============================================================
<-- Living 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: #010212;
    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: #fff;
    font-size: 30px;
    display: block;
}

.sidebar-widget-container {
    position: relative;
    top: 150px;
    opacity: 0;
    visibility: hidden;
    /*-webkit-transition: all 0.3s ease-in 0.3s;
    -o-transition: all 0.3s ease-in 0.3s;
    transition: all 0.3s ease-in 0.3s;*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sidebar-group.isActive .sidebar-widget-container {
    top: 0px;
    opacity: 1;
    visibility: visible;
    /*-webkit-transition: all 1s ease-out 1.2s;
    -o-transition: all 1s ease-out 1.2s;
    transition: all 1s ease-out 1.2s;*/
    -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: #fff;
    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: #fff;
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: 600;
}

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

.sidebar-group ul.list-style-one li i {
    font-size: 20px;
    font-weight: 600;
    color: #0154F7;
    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: #fff;
    color: var(--primary-color);
    text-decoration: none;
    transition: .5s;
    font-size: 18px;
    border-radius: 3px;
}

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


/* sidebar menu */

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

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

.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: #141422;
}

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

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



/*** 
====================================================================
    Search Popup
====================================================================
***/
.search-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0, 0, 0, 0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    /* easeInOutQuint */
}

.search-popup {
    width: 100%;
}

.search-active .search-popup {
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: #0154F7;
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border-bottom: 3px solid #ffffff;
    -webkit-transition: all 500ms ease;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-active .search-popup .close-search {
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form {
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin: -35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form {
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group {
    position: relative;
    margin: 0px;
    overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 50px;
    color: #000000;
    height: 70px;
    width: 100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    font-weight: 500;
    text-transform: capitalize;
}

.search-popup .form-group input[type="submit"],
.search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #0154F7;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover {
    color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
    color: #000000;
}

.search-popup .close-search.style-two {
    position: absolute;
    right: 25px;
    left: auto;
    color: #ffffff;
    width: auto;
    height: auto;
    top: 25px;
    margin: 0px;
    border: none;
    background: none !important;
    box-shadow: none !important;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.flaticon-multiply:before {
    content: inherit;
}

button.close-search i {
    font-size: 25px;
    color: #fff;
    display: inline-block;
}

span.flaticon-multiply i {
    display: inline-block;
    color: #0154F7;
}




/*
<!-- ============================================================== -->
<!-- Living 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: #0154F7;
    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: #0154F7;
}

.prgoress_scrollup svg path {
    fill: none;
}

.prgoress_scrollup svg.progress-circle path {
    stroke: #0154F7;
    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;
    }
}

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

.preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    background: #000;
}

.circles {
    width: 300px;
    height: 300px;
    position: relative;
    margin: auto;
}

.circles>* {
    background-color: transparent;
    box-sizing: border-box;
    border: 5px solid powderblue;
    border-top: 0 solid transparent;
    border-left: 0 solid transparent;
    border-radius: 50%;
    position: absolute;
    animation: spin 4s infinite linear alternate;
}

.circle1 {
    width: 300px;
    height: 300px;
    animation-delay: -5s;
    border-color: rgba(163, 207, 213, 1);
}

.circle2 {
    width: 280px;
    height: 280px;
    top: 10px;
    left: 10px;
    animation-delay: -4.9s;
    border-color: rgba(163, 207, 213, .95);
}

.circle3 {
    width: 260px;
    height: 260px;
    top: 20px;
    left: 20px;
    animation-delay: -4.8s;
    border-color: rgba(163, 207, 213, .9);
}

.circle4 {
    width: 240px;
    height: 240px;
    top: 30px;
    left: 30px;
    animation-delay: -4.7s;
    border-color: rgba(163, 207, 213, .85);
}

.circle5 {
    width: 220px;
    height: 220px;
    top: 40px;
    left: 40px;
    animation-delay: -4.6s;
    border-color: rgba(163, 207, 213, .8);
}

.circle6 {
    width: 200px;
    height: 200px;
    top: 50px;
    left: 50px;
    animation-delay: -4.5s;
    border-color: rgba(163, 207, 213, .75);
}

.circle7 {
    width: 180px;
    height: 180px;
    top: 60px;
    left: 60px;
    animation-delay: -4.4s;
    border-color: rgba(163, 207, 213, .7);
}

.circle8 {
    width: 160px;
    height: 160px;
    top: 70px;
    left: 70px;
    animation-delay: -4.3s;
    border-color: rgba(163, 207, 213, .65);
}

.circle9 {
    width: 140px;
    height: 140px;
    top: 80px;
    left: 80px;
    animation-delay: -4.2s;
    border-color: rgba(163, 207, 213, .6);
}

.circle10 {
    width: 120px;
    height: 120px;
    top: 90px;
    left: 90px;
    animation-delay: -4.1s;
    border-color: rgba(163, 207, 213, .55);
}

.circle11 {
    width: 100px;
    height: 100px;
    top: 100px;
    left: 100px;
    animation-delay: -4s;
    border-color: rgba(163, 207, 213, .5);
}

.circle12 {
    width: 80px;
    height: 80px;
    top: 110px;
    left: 110px;
    animation-delay: -3.9s;
    border-color: rgba(163, 207, 213, .45);
}

.circle13 {
    width: 60px;
    height: 60px;
    top: 120px;
    left: 120px;
    animation-delay: -3.8s;
    border-color: rgba(163, 207, 213, .4);
}

.circle14 {
    width: 40px;
    height: 40px;
    top: 130px;
    left: 130px;
    animation-delay: -3.7s;
    border-color: rgba(163, 207, 213, .35);
}

.circle15 {
    width: 20px;
    height: 20px;
    top: 140px;
    left: 140px;
    animation-delay: -3.6s;
    border-color: rgba(163, 207, 213, .3);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

    ;
}