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

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




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

.topbar-area {
    padding: 20px 0;
}

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

.medical-service {
    display: flex;
    align-items: center;
    position: relative;
}

.medical-service::before {
    position: absolute;
    content: "";
    height: 128px;
    width: 1px;
    background: #fff;
    right: -20px;
}

.medical-items-box {
    text-align: center;
    margin-left: 50px;
    position: relative;
}

.medical-items-box::before {
    position: absolute;
    content: "";
    height: 128px;
    width: 1px;
    background: #fff;
    left: -25px;
    top: -20px;
}

.medical-icon {
    position: relative;
    transition: .5s;
    top: 0;
}

.medical-items-box:hover .medical-icon {
    top: -5px;
}

.medical-content h4 {
    color: #002935;
    font-size: 24px;
    font-weight: 500;
    margin-top: 8px;
}

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

.header-social {
    display: flex;
    align-items: center;
}

.header-search a {
    font-size: 30px;
    color: #fff;
    font-weight: 800;
}

.header-call {
    display: flex;
    align-items: center;
    margin-left: 53px;
}

.header-call-icon i {
    font-size: 30px;
    color: #fff;
    font-weight: 800;
}

.header-call-title {
    margin-left: 20px;
}

.header-call-title a {
    display: block;
    color: #FFF;
    font-family: Barlow;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    text-decoration: none;
}


header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0957DE;
}

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

a.logo {
    display: none;
}

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

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

.navbar .list a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    transition: 0.25s;
    position: relative;
    padding: 25px 0;
    text-transform: uppercase;
}

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

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


#menu-btn {
    display: none;
}

#navbar-sticky {
    background-color: #0957DE;
    position: fixed;
    top: 0;
    left: 0;
    margin: auto;
    top: 0;
    right: 0;
    width: 100%;
    position: fixed !important;
    z-index: 9999 !important;
    animation: fadeInDown 1s both 0.2s;
    padding: 0 30px;
}



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

.banner-area {
    border-bottom: 1px solid #fff;
    height: 750px;
}

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

.banner-title {
    display: flex;
    align-items: center;
    margin-bottom: 29px;
}

.banner-sub-title h4 {
    color: #0957DE;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    margin-left: 12px;
}

.banner-main-title {
    margin-bottom: 50px;
}

.banner-main-title h1 {
    color: #0957DE;
    font-family: Barlow;
    font-size: 65px;
    font-weight: 600;
    line-height: 75px;
}

.banner-main-title h1 span {
    color: #00BAEB;
    font-size: 65px;
    font-weight: 400;
    line-height: 75px;
}

.banner-thumb {
    position: relative;
    z-index: 1;
    top: 29px;
}

.banner-shape {
    position: absolute;
    bottom: 0;
    z-index: -1;
    right: 0;
}


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

.medical-btn a {
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    padding: 14px 33px;
    text-transform: uppercase;
    text-decoration: none;
    background: #00BAEB;
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 57px;
    max-width: 161px;
    text-transform: uppercase;
    z-index: 1;
}

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

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

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

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

/* about btn */

.medical-btn.about a {
    padding: 14px 23px;
    background: #0957DE;
}

.medical-btn.about a::before,
.medical-btn.about a::after {
    border-bottom: 80px solid #00BAEB;
}

/* project area btn */

.medical-btn.about.project a {
    padding: 14px 17px;
    font-size: 18px;
}

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

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

.service-thumb {
    position: relative;
}

.service-text {
    position: absolute;
    bottom: 77px;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
}

.service-text h4 {
    color: #FFF;
    font-size: 26px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 40px;
}

.service-text a {
    color: #0957DE;
    font-size: 24px;
    font-weight: 600;
    background: #fff;
    text-decoration: none;
    padding: 13px 70px;
    border-radius: 4px;
    transition: .5s;
}

.service-text a:hover {
    background: #0957DE;
    color: #fff;
}

/* servce items box */

.service-items-box {
    background: #FFF;
    border-radius: 4px;
    padding: 52px 26px 54px;
}

.service-items-content h4 a {
    color: #002935;
    font-size: 26px;
    font-weight: 500;
    text-decoration: none;
    transition: .5s;
}

.service-items-box:hover .service-items-content h4 a {
    color: #0957DE;
}

.service-items-content p {
    color: #747474;
    font-size: 16px;
    font-weight: 400;
    width: 83%;
    margin: 13px 0 18px;
}

.service-items-content i {
    width: 35px;
    height: 31px;
    border-radius: 2px;
    background: #FFF;
    box-shadow: 0px 4px 55px 2px rgba(0, 0, 0, 0.30);
    display: inline-block;
    line-height: 31px;
    text-align: center;
    color: #0957DE;
    font-size: 12px;
    transition: .5s;
    margin-left: 0;
}

.service-items-box:hover .service-items-content i {
    margin-left: 10px;
}

/* service single box */

.service-single-box {
    background: #0957DE;
    text-align: center;
    border-radius: 4px;
    padding: 88px 0 60px;
    position: relative;
    transition: .5s;
}

.service-single-box:hover {
    background: #00BAEB;
}

.service-single-box::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 65px;
    background: #D9D9D9;
    top: 0;
}

.service-single-box::after {
    position: absolute;
    content: "";
    width: 65px;
    height: 1px;
    background: rgba(255, 255, 255, 0.40);
    left: 0;
    right: 0;
    margin: auto;
    bottom: 32px;
}

.service-icon {
    margin-bottom: 20px;
    transition: .5s;
    top: 0;
    position: relative;
}

.service-single-box:hover .service-icon {
    top: -5px;
}

.service-content h4 a {
    color: #FFF;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
}

.service-content p {
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    margin: 13px 0 0;
}

/*==================================================
 <-- Medway Section Title Css-->
===================================================*/

.section-sub-title h4 {
    color: #0957DE;
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 11px;
}

.section-main-title {
    margin-bottom: 42px;
}

.section-main-title h2 {
    color: #010212;
    font-size: 45px;
    font-weight: 600;
    line-height: 55px;
}

/* about section title */

.section-sub-title.about h4 {
    margin-bottom: 27px;
}

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

/* pricing section title */

.section-main-title.pricing {
    margin-bottom: 50px;
}

/* appoinment section title  */

.section-sub-title.appoinment h4 {
    color: #fff;
}

.section-main-title.appoinment h2 {
    color: #fff;
    margin-bottom: 50px;
}

/* testi section title */

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

/*==================================================
 <-- Medway About Area Css-->
===================================================*/
.about-area {
    padding: 0 0 120px;
}

.about-discription p {
    color: #747474;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    width: 90%;
    margin-bottom: 23px;
}

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

.about-list span {
    display: block;
    margin-bottom: 10px;
    color: #002935;
    font-family: Barlow;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.about-list span i {
    color: #00BAEB;
    margin-right: 3px;
}

.about-thumb {
    position: relative;
    z-index: 1;
    text-align: right;
}

.about-shape1 {
    position: absolute;
    bottom: 0;
    left: 50px;
}

.about-shape2 {
    position: absolute;
    top: 66px;
    right: 120px;
    z-index: -1;
}

/*==================================================
 <-- Medway Counter Area Css-->
===================================================*/

.counter-area {
    background: url(../images/resource/counter-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 105px 0 120px;
}

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

.counter-numbar h4 {
    color: #FFF;
    font-size: 64px;
    font-weight: 600;
    display: inline-block;
}

.counter-numbar span {
    color: #FFF;
    font-size: 64px;
    font-weight: 600;
    display: inline-block;
}

.counter-content h4 {
    color: #FFF;
    font-size: 24px;
    font-weight: 600;
    margin: 20px 0 0;
}

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

.team-area {
    padding: 115px 0 100px;
}

.team-items {
    margin: 10px;
}

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

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

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

.team-main-icon {
    position: absolute;
    top: 25px;
    right: 26px;
    z-index: 99;
}

.team-main-icon a {
    height: 60px;
    width: 60px;
    background: #00BAEB;
    display: inline-block;
    text-align: center;
    line-height: 60px;
    color: #fff;
    border-radius: 50%;
    font-size: 30px;
    position: relative;
    z-index: 1;
}

.team-main-icon a::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0957DE;
    border-radius: 50%;
    transform: scale(0);
    z-index: -1;
    transition: .5s;
}

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

.team-icon {
    position: absolute;
    top: 28px;
    right: 25px;
    opacity: 0;
    transition: .5s;
}

.team-items:hover .team-icon {
    opacity: 1;
}

.team-icon ul {
    list-style: none;
    background: #0957DE;
    padding: 0px 24px 20px;
    display: inline-block;
    border-radius: 30px;
    transition: .5s;
}

.team-items:hover .team-icon ul {
    padding: 62px 24px 20px;
}

.team-icon ul li {
    margin-top: 5px;
}

.team-icon ul li a i {
    font-size: 14px;
    color: #fff;
}

.team-content {
    position: absolute;
    bottom: 0;
}

.team-content h4 {
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px 3px 0px 0px;
    background: #00BAEB;
    display: inline-block;
    padding: 8px 68px 8px 10px;
    position: relative;
    z-index: 1;
}

.team-content h4::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0;
    background: #0957DE;
    top: 0;
    border-radius: 3px 3px 0px 0px;
    left: 0;
    z-index: -1;
    transition: .5s;
}

.team-items:hover .team-content h4::before {
    width: 100%;
}

.team-content h2 {
    color: #010212;
    font-size: 24px;
    font-weight: 500;
    background: #FFF;
    padding: 10px 40px 10px 8px;
}

.team-content h2 a {
    text-decoration: none;
}

/* owl nav */

.owl-nav {
    position: absolute;
    top: -92px;
    right: 20px;
    display: inline-flex;
}

.owl-prev i {
    width: 50px;
    height: 50px;
    border: 1px solid #0957DE;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    color: #0957DE;
    font-size: 23px;
    transition: .5s;
}

.owl-prev:hover i {
    background: #0957DE;
    color: #fff;
}

.owl-next i {
    width: 50px;
    height: 50px;
    border: 1px solid #0957DE;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    color: #0957DE;
    margin-left: 20px;
    font-size: 23px;
    transition: .5s;
}

.owl-next:hover i {
    background: #0957DE;
    color: #fff;
}

/*==================================================
 <-- Medway Project Area Css-->
===================================================*/

.project-area {
    padding: 0 0 110px;
}

/* project item box */

.project-item-box {
    background: #00BAEB;
    padding: 82px 64px 85px;
}

.project-item-content h3 a {
    color: #FFF;
    font-size: 45px;
    font-weight: 600;
    text-decoration: none;
}

.project-item-content p {
    color: #FFF;
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
    width: 64%;
    margin: 24px 0 34px;
}

/* project single box */

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

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

.project-thumb::before {
    position: absolute;
    left: 0;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 186, 235, 0.56);
    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;
}

.project-single-box:hover .project-thumb::before {
    -webkit-transform: scaleY(1) translateZ(0px);
    -ms-transform: scaleY(1) translateZ(0px);
    transform: scaleY(1) translateZ(0px);
    visibility: visible;
}

.project-thumb img {
    transition: all 2s ease;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

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

.project-text {
    width: 386px;
    height: 117px;
    background: #0957DE;
    padding: 21px 33px 0;
    position: absolute;
    bottom: -120px;
    left: 0;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.project-single-box:hover .project-text {
    bottom: 0;
    opacity: 1;
    transition-delay: 0.5s;
}

.project-text h4 a {
    color: #FFF;
    font-size: 22px;
    font-weight: 600;
    line-height: 40px;
    text-decoration: none;
}

.project-text span {
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
}

.project-icon {
    position: absolute;
    right: -50px;
    bottom: 20px;
    transition: .5s;
    opacity: 0;
    transition: 0.3s cubic-bezier(0.5, 1, 0.89, 1);
    z-index: 1;
}

.project-single-box:hover .project-icon {
    right: 16px;
    opacity: 1;
    transition-delay: 0.9s;
}

.project-icon a {
    width: 63px;
    height: 63px;
    display: inline-block;
    background: #0957DE;
    border: 1px solid #0957DE;
    line-height: 58px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    transition: .5s;
}

.project-icon a:hover {
    background: inherit;
    border: 1px solid #0957DE;
}

/*==================================================
 <-- Medway Pricing Area Css-->
===================================================*/

.pricing-area {
    padding: 0 0 300px;
}

/* toggle bar css */

div#toggle-bar {
    text-align: right;
    margin-top: 20px;
}

#toggle-bar>.tb-labels {
    vertical-align: 50%;
    color: #002935;
    font-size: 18px;
    font-weight: 500;
}

#toggle-bar>#annually {
    margin-right: 1rem;
}

#toggle-bar>#monthly {
    margin-left: 1rem;
}

#toggle-bar>#toggle-container {
    display: inline-block;
    cursor: pointer;
    border-radius: 45px;
    border: 1px solid #0957DE;
    background: #FFF;
    width: 134px;
    height: 50px;
}

#toggle-container>#toggle {
    border-radius: 45px;
    background: #0957DE;
    width: 78px;
    height: 50px;
}


/* pricing single box */

.pricing-single-box {
    background: #FFF;
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.10);
    padding: 50px 70px 0;
    position: relative;
    z-index: 1;
    transition: all 2s ease;
}

.pricing-single-box:hover {
    background: url(../images/resource/pricing-hover.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.pricing-single-box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 70px;
    background: #00BAEB;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.pricing-single-box::after {
    position: absolute;
    content: "";
    height: 70px;
    background: #0957DE;
    width: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
    transition: .5s;
}

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


.pricing-title h3 {
    color: #002935;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 18px;
    transition: .5s;
}

.pricing-single-box:hover .pricing-title h3 {
    color: #fff;
}

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

.pricing-rate h3 {
    color: #0957DE;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
    font-size: 48px;
    font-weight: 600;
    transition: .5s;
    display: inline-block;
    transition: .5s;
}

.pricing-single-box:hover .pricing-rate h3 {
    color: #fff;
}

.pricing-rate span {
    color: #747474;
    font-size: 20px;
    font-weight: 600;
    transition: .5s;
}

.pricing-single-box:hover .pricing-rate span {
    color: #fff;
}

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

.pricing-list span {
    display: block;
    color: #747474;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 15px;
    transition: .5s;
}

.pricing-single-box:hover .pricing-list span {
    color: #fff;
}

.pricing-list span i {
    height: 15px;
    width: 15px;
    line-height: 17px;
    background: #747474;
    display: inline-block;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin-right: 7px;
}

.pricing-single-box:hover .pricing-list span i {
    background: #fff;
    color: #0957DE;
}

.pricing-list span.active i {
    background: #0957DE;
}

.pircing-btn a {
    display: inline-block;
    color: #FFF;
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    padding: 22px 40px 22px;
}



/*==================================================
 <-- Medway Appoinment Area Css-->
===================================================*/
.appoinmnet-area {
    background: url(../images/resource/appoinment-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 25px 0 300px;
    margin-bottom: -205px;
}

/* form css */

.appoinment-form {
    background: url(../images/resource/appoinment.png);
    background-size: cover;
    padding: 100px 30px 20px 30px;
    margin-top: -204px;
}

.form_group {
    position: relative;
    margin-bottom: 20px;
    text-align: left;
}

.form_group input {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    padding: 12px 30px 12px 15px;
    width: 270px;
    height: 52px;
}

.form_group input::placeholder {
    color: rgba(255, 255, 255, 0.90);
    font-size: 15px;
    font-weight: 500;
}

.form_group i {
    position: absolute;
    right: 20px;
    top: 13px;
    color: rgba(255, 255, 255, 0.90);
    font-size: 16px;
}

.form_group textarea {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    padding: 12px 30px 12px 15px;
    width: 100%;
    height: 134px;
}

.form_group textarea::placeholder {
    color: rgba(255, 255, 255, 0.90);
    font-size: 15px;
    font-weight: 500;
}

.form_group button {
    width: 195px;
    height: 64.641px;
    border: none;
    color: #0355F7;
    font-size: 18px;
    font-weight: 600;
    transition: .5s;
}

.form_group button:hover {
    background: #0355F7;
    color: #fff;
}

/* testimonial css */

.testimonial-item {
    margin-left: 50px;
}

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

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

.testi-thumb img {
    border-radius: 50%;
}

.testi-title {
    margin-bottom: 18px;
}

.testi-title h4 {
    color: #FFF;
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
}

.testi-title span {
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
}

.testi-review i {
    color: #FFC107;
    margin-right: 5px;
    font-size: 17px;
}

.testi-content p {
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    margin: 34px 0 0;
}

.testi-icon {
    position: absolute;
    top: 0;
    right: 0;
}


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

.brand-area {
    padding: 55px 0 55px;
    background: #00BAEB;
}

.brand-thumb {
    margin: 30px;
}

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

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

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

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

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

.blog-meta-date {
    width: 60px;
    height: 53px;
    border-radius: 3px 0px 0px 3px;
    background: #00BAEB;
    line-height: 0px;
    position: absolute;
    z-index: 1;
    padding: 7px 0px 0px;
    bottom: 0;
    right: 0;
}

.blog-meta-date::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #0154F7;
    border-radius: 3px 0px 0px 3px;
    margin: auto;
    z-index: -1;
    transition: .5s;
}

.blog-single-box:hover .blog-meta-date::before {
    width: 100%;
}

.blog-meta-date h5 {
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}

.blog-meta-date span {
    color: #FFF;
    font-size: 16px;
    text-align: center;
    margin-left: 16px;
}

.blog-content {
    padding: 24px 24px 25px;
    background: #FFF;
    box-shadow: 0px 4px 30px 0px #E3E3E2;
}

.blog-meta {
    margin-bottom: 10px;
}

.blog-meta span {
    margin-right: 28px;
    font-size: 16px;
}

.blog-single-box:hover .blog-meta span {
    color: #0154F7;
}

.blog-meta span i {
    margin-right: 5px;
}


.blog-single-box:hover .blog-meta span i {
    color: #0154F7;
}

.blog-title {
    margin-bottom: 20px;
}

.blog-title h4 a {
    font-size: 24px;
    padding: 0px 0 17px;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 34px;
    text-decoration: none;
}

.blog-single-box:hover .blog-title h4 a {
    color: #0154F7;
}

.blog-single-box:hover .blog-btn a {
    color: #0154F7;
}

.blog-btn a {
    color: #010212;
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    text-decoration: none;
    transition: .5s;
}

.blog-btn a i {
    color: #0154F7;
}


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

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

/* footer contact */

.footer-contact {
    border-radius: 0px 0px 14px 14px;
    background: #0957DE;
    padding: 32px 30px 32px;
    margin-bottom: 110px;
}

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

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

.contact-text h4 {
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

.contact-text a {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
}

.form-field {
    position: relative;
}

.form-field input {
    background: inherit;
    outline: 0;
    border: 0;
    border-bottom: 1px solid #fff;
    width: 289px;
    height: 38px;
    padding: 25px 0px 24px;
}

.form-field input::placeholder {
    color: #FFF;
    font-size: 17px;
    font-weight: 500;
}

button.newsletter-button {
    top: 5px;
    position: absolute;
    right: 7px;
}

button.newsletter-button i {
    width: 34px;
    height: 30px;
    display: inline-block;
    border: none;
    outline: 0;
    line-height: 30px;
    color: #0957DE;
    background: #fff;
}

/* footer social */

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

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

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

.footer-social ul li a:hover i {
    color: #fff;
}

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

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


/* footer widget */

.footer-wiget-text h4 {
    margin: 28px 0 24px;
    color: #FFF;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
}

.footer-shape-title h3 {
    color: #FFF;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 23px;
}

.footer-wiget-shape {
    display: inline-block;
    margin-right: 10px;
}

.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: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 34px;
    padding: 0 0 18px;
}

.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;
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
    transition: .5s;
    margin: 0;
}

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

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

.footer-widget-contct-menu ul li.line {
    margin-bottom: 20px;
    border-bottom: 1px solid #252424;
    padding: 0px 0 13px;
}

.footer-widget-contct-menu ul li a {
    display: block;
    color: #FFF;
    font-size: 18px;
    line-height: 32px;
    font-weight: 400;
    margin: 5px 0 4px;
    transition: .5s;
    text-decoration: none;
}

.row.line {
    border-top: 1px solid rgba(255, 255, 255, 0.30);
    padding: 12px 0 0px;
}

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

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

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

.footer-condition {
    text-align: right;
}

.footer-condition ul {
    list-style: none;
}

.footer-condition ul li {
    display: inline-block;
}

.footer-condition ul li a {
    display: inline-block;
    margin-right: 28px;
    color: #FFF;
    font-size: 18px;
    line-height: 34px;
    font-weight: 400;
    text-decoration: none;
    transition: .5s;
}

.footer-condition ul li a:hover {
    color: #0154F7;
}




















/*===============================================================
<-- Medway 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;
    background: #0154F7;
    line-height: 52px;
    display: inline-block;
    text-align: center;
    color: #fff;
    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;
}




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

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

.loader_bg {
    position: fixed;
    z-index: 9999;
    background: #1f1f1f;
    width: 100%;
    height: 100%;
}

.loading-title {
    position: absolute;
    top: calc(50vh - 25px);
    left: calc(50vw - 40px);
    z-index: 1;
    font-size: 22px;
    color: #FFF;
    font-weight: 400;
    letter-spacing: 3px;
}

.loader {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
}

.loader:before,
.loader:after {
    content: '';
    border: 1em solid #0154F7;
    border-radius: 50%;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader 2s linear infinite;
    opacity: 0;
}

.loader:before {
    animation-delay: .5s;
}