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

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




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

.topbar-area {
    padding: 20px 0;
    background: #4da628;
    position: relative;
    z-index: 1;
}

.topbar-area::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 570px;
    background: #fbad17;
    right: 0;
    top: 0;
    z-index: -1;
}

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

.topbar-items ul li {
    display: inline-block;
    margin-right: 53px;
}

.topbar-items ul li a {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    font-family: "Raleway";
}

.topbar-items ul li i {
    margin-right: 5px;
    font-size: 18px;
    color: #FFF;
}

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

.topbar-social h4 {
    display: inline-block;
    margin-right: 20px;
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Raleway";
}

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

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

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



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

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

.header-area::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 600px;
    background: #fbad17;
    left: 0;
    top: 0;
    z-index: -1;
}

.header-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 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: #191d1d;
    font-weight: 400;
    font-family: "Raleway";
    text-decoration: none;
    position: relative;
    transition: .5s;
    padding: 50px 0;
}

.header-menu ul li a:hover {
    color: #4da628;
}

.header-menu ul li a::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 0;
    background: #4da628;
    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;
}

.header-menu ul li a.search-box-btn i {
    font-size: 18px;
    margin-left: 36px;
}

/* 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 #4da628;
    opacity: 0;
    z-index: 999;
}

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

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

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

.Namesurf-btn a {
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
    padding: 14px 38px;
    background-color: #4da628;
    text-decoration: none;
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 1;
}

.Namesurf-btn a::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fbad17;
    clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
    z-index: -1;
    transition: .5s;
}

.Namesurf-btn a:hover::before {
    clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
}

/* slider btn */

/* slider btn */

.Namesurf-btn.slider1 {
    position: relative;
    display: block;
    overflow: hidden;
    opacity: 0;
    -webkit-transform: perspective(400px) rotateX(20deg) translateY(80px);
    -ms-transform: perspective(400px) rotateX(20deg) translateY(80px);
    transform: perspective(400px) rotateX(20deg) translateY(80px);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
}

.active .Namesurf-btn.slider1 {
    opacity: 1;
    -webkit-transform: perspective(400px) rotateX(0deg) translateY(0px);
    -ms-transform: perspective(400px) rotateX(0deg) translateY(0px);
    transform: perspective(400px) rotateX(0deg) translateY(0px);
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}



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

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

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

.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%;
    z-index: 9;
}

.slider-main-title {
    position: relative;
    display: block;
    opacity: 0;
    -webkit-transform: perspective(400px) rotateY(20deg) translateY(80px);
    -ms-transform: perspective(400px) rotateY(20deg) translateY(80px);
    transform: perspective(400px) rotateY(20deg) translateY(80px);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
}

.active .slider-main-title {
    opacity: 1;
    -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px);
    -ms-transform: perspective(400px) rotateY(0deg) translateY(0px);
    transform: perspective(400px) rotateY(0deg) translateY(0px);
    -webkit-transition-delay: 1000ms;
    -moz-transition-delay: 1000ms;
    -ms-transition-delay: 1000ms;
    -o-transition-delay: 1000ms;
    transition-delay: 1000ms;
}

.slider-main-title h1 {
    color: #FFF;
    font-size: 72px;
    font-weight: 800;
    line-height: 84px;
}

.slider-discripton {
    position: relative;
    display: block;
    opacity: 0;
    -webkit-transform: perspective(400px) rotateY(20deg) translateY(80px);
    -ms-transform: perspective(400px) rotateY(20deg) translateY(80px);
    transform: perspective(400px) rotateY(20deg) translateY(80px);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
}

.slider-discripton:before {
    position: absolute;
    top: 14px;
    left: 0;
    bottom: 21px;
    width: 10px;
    content: "";
}

.active .slider-discripton {
    opacity: 1;
    -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px);
    -ms-transform: perspective(400px) rotateY(0deg) translateY(0px);
    transform: perspective(400px) rotateY(0deg) translateY(0px);
    -webkit-transition-delay: 1000ms;
    -moz-transition-delay: 1000ms;
    -ms-transition-delay: 1000ms;
    -o-transition-delay: 1000ms;
    transition-delay: 1000ms;
}


.slider-discripton p {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
    margin: 24px 0px 57px;
    width: 66%;
}

/* search box */

.banner-search-box {
    position: absolute;
    top: 13%;
    left: 62%;
    padding: 90px 33px 0;
    width: 477px;
    height: 546px;
    background-color: #4da628;
    overflow: hidden;
    opacity: 0;
    -webkit-transform: perspective(400px) rotateX(20deg) translateY(80px);
    -ms-transform: perspective(400px) rotateX(20deg) translateY(80px);
    transform: perspective(400px) rotateX(20deg) translateY(80px);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
}

.active .banner-search-box {
    opacity: 1;
    -webkit-transform: perspective(400px) rotateX(0deg) translateY(0px);
    -ms-transform: perspective(400px) rotateX(0deg) translateY(0px);
    transform: perspective(400px) rotateX(0deg) translateY(0px);
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

.form-group input {
    width: 100%;
    height: 56px;
    border: 1px solid #74b559;
    padding: 0px 20px;
    margin-bottom: 30px;
    background: none;
    outline: none;
    color: #ffff;
}

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

input[type="date" i ] {
    color: #fff;
}

input[type="date"] {
    padding: 0px 0px 0px 20px;
}

.form-group select {
    width: 100%;
    height: 52px;
    border: 1px solid #74b559;
    padding: 0px 20px;
    margin-bottom: 30px;
    outline: none;
    background: none;
    color: #fff;
}

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

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

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

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

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

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

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

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

.form-group button {
    width: 412px;
    height: 50px;
    background-color: #ffffff;
    border: 0;
    outline: 0;
    font-size: 22px;
    color: #4da628;
    font-weight: 500;
    transition: .5s;
}

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

/* video page css */

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

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

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

.section-sub-title h4 {
    font-size: 20px;
    line-height: 30px;
    color: #4da628;
    font-weight: 500;
    margin-bottom: 21px;
}

.section-main-title h2 {
    font-size: 48px;
    color: #102806;
    font-weight: 800;
    display: inline-block;
    position: relative;
    margin-bottom: 90px;
}

.section-main-title h2::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: url(../images/resource/main-title-shape.png);
    background-repeat: no-repeat;
    bottom: -76px;
}

/* about section title */

.section-main-title.about h2::before {
    bottom: -120px;
}

/* package section title */

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

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

/*travel section title */

.section-main-title.travel h2::before {
    left: 20%;
}

/* platfomr section title */

.section-main-title.platform h2 {
    margin-bottom: 60px;
}

.section-main-title.platform h2::before {
    top: 105%;
}


/*==================================================
 <-- Namesurf Destination Area Css-->
===================================================*/

.destinaiton-area {
    padding: 118px 0 166px;
}

.destinaion-single-box.inner {
    margin-top: 50px;
}

.destination-thumb {
    position: relative;
}

.destination-thumb::before {
    background: rgba(255, 255, 255, 0.3);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    transition: all 500ms linear;
}

.destinaion-single-box:hover .destination-thumb::before {
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 500ms linear;
}

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

.destinaiton-rating {
    position: absolute;
    top: 25px;
    left: 20px;
    width: 76px;
    height: 34px;
    border-radius: 5px;
    background-color: #f5f5f5;
}

.destinaiton-rating h4 {
    font-size: 16px;
    color: #191d1d;
    font-weight: 500;
    padding: 8px 0;
    text-align: center;
}

.destinaiton-rating h4 i {
    color: #4da628;
    font-size: 16px;
    margin-right: 6px;
}

.destination-content {
    position: absolute;
    bottom: -45px;
    width: 283px;
    height: 98px;
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
    background-color: #ffffff;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0;
}

.destination-content h4 a {
    font-size: 20px;
    line-height: 30px;
    color: #102806;
    font-weight: 600;
    text-decoration: none;
    transition: 0.5s;
    position: relative;
    background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
    transition: all 500ms ease;
}

.destinaion-single-box:hover .destination-content h4 a {
    color: #4da628;
    background-size: 100% 1px;
}

.destination-icon i {
    width: 42px;
    height: 42px;
    border-radius: 21px;
    background-color: #4da628;
    display: block;
    text-align: center;
    color: #fff;
    font-size: 18px;
    line-height: 40px;
}

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

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

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

.about-icon {
    margin-bottom: 5px;
}

.about-content h4 {
    font-size: 20px;
    line-height: 60px;
    color: #102806;
    font-weight: 600;
}

.about-content p {
    font-size: 16px;
    line-height: 24px;
    color: #505050;
    font-weight: 500;
    width: 91%;
}

/* 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: 40px;
}

.about-content h5 {
    font-size: 24px;
    color: #102806;
    font-weight: 600;
    margin-bottom: 5px;
}

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

/* about images */

.about-images {
    text-align: right;
    position: relative;
}

.about-thumb {
    position: relative;
}

.about-thumb::before {
    background: rgba(255, 255, 255, 0.3);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    transition: all 500ms linear;
}

.about-thumb:hover::before {
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 500ms linear;
}

.about-thumb2 {
    position: absolute;
    bottom: 43%;
    left: -23px;
}

.about-thumb2::before {
    background: rgba(255, 255, 255, 0.3);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    transition: all 500ms linear;
}

.about-thumb2:hover::before {
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 500ms linear;
}

.about-thumb3 {
    position: absolute;
    bottom: 0;
    left: -23px;
}

.about-thumb3::before {
    background: rgba(255, 255, 255, 0.3);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    transition: all 500ms linear;
}

.about-thumb3:hover::before {
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 500ms linear;
}



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

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

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

.service-thumb {
    position: relative;
}

.service-thumb::before {
    background: rgba(255, 255, 255, 0.3);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    transition: all 500ms linear;
}

.service-single-box:hover .service-thumb::before {
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 500ms linear;
}

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

.service-parcentange {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 94px;
    height: 32px;
    background-color: #ffffff;
}

.service-parcentange h4 {
    font-size: 16px;
    color: #4da628;
    font-weight: 500;
    padding: 7px 0px;
    text-align: center;
}

.service-icon {
    position: absolute;
    bottom: -27px;
    right: 27px;
    z-index: 9;
}

.service-icon i {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    display: inline-block;
    text-align: center;
    line-height: 53px;
    color: #4da628;
    transition: 0.5s;
}

.service-icon:hover i{
    background: #4da628;
    color: #fff;
}

.service-content {
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    padding: 35px 28px 20px;
}

.service-location p {
    font-size: 16px;
    line-height: 24px;
    color: #505050;
    font-weight: 400;
}

.service-location p i {
    margin-right: 5px;
}

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

.service-single-box:hover .service-title h4 a {
    color: #4da628;
    background-size: 100% 1px;
}

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

.service-rate h4 {
    font-size: 18px;
    line-height: 24px;
    color: #505050;
    font-weight: 400;
}

.service-offer {
    margin: 19px 0 26px;
    border-bottom: 1px solid #d0d0d0;
    padding: 0px 0 28px;
}

.service-rate h4 span {
    font-size: 20px;
    color: #4da628;
    font-weight: 500;
}

.service-rate del {
    font-size: 14px;
}

.service-days h4 {
    font-size: 16px;
    line-height: 24px;
    color: #505050;
    font-weight: 400;
}

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

.service-star i {
    color: #4da628;
    font-size: 20px;
    margin-right: 5px;
}

.service-btn a {
    font-size: 16px;
    line-height: 24px;
    color: #050f33;
    font-weight: 500;
    text-decoration: none;
    transition: 0.5s;
}

.service-btn a:hover{
    color: #4da628;
}

.service-btn a i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #4da628;
    color: #fff;
    font-size: 11px;
    display: inline-block;
    text-align: center;
    line-height: 22px;
    margin-left: 5px;
}


/*==================================================
 <-- Namesurf Package Area Css-->
===================================================*/

.package-area {
    background: #1d231f;
    padding: 120px 0 74px;
}

.packages-signle-box {
    border: 1px solid #2e3530;
    padding: 21px 27px;
    border-radius: 10px;
    margin-bottom: 30px;
    transition: 0.5s;
}

.packages-signle-box:hover{
    background: #4da628;
}

.packages-icon {
    float: left;
    margin-right: 40px;
    margin-top: -6px;
}

.packages-content h4 {
    font-size: 19px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 500;
}

.package-thumb {
    position: relative;
    top: -120px;
    left: 30px;
}


/*==================================================
 <-- Namesurf Travel Area Css-->
===================================================*/

.travel-area{
    padding: 118px 0 116px;
    position: relative;
    z-index: 1;
}

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

.travel-thumb {
    margin-bottom: 25px;
}

.travel-thumb img {
    transition: transform 500ms ease, opacity 500ms ease;
}

.travel-single-box:hover .travel-thumb img{
    transform: scale(1.05) rotate(1.3deg);
}

.travel-content h4 a {
    font-size: 30px;
    line-height: 60px;
    color: #191d1d;
    font-weight: 500;
    text-decoration: none;
    transition: 0.5s;
}

.travel-single-box:hover .travel-content h4 a{
    color: #4da628;
}

.travel-content p {
    font-size: 16px;
    line-height: 24px;
    color: #505050;
    font-weight: 400;
    width: 73%;
    left: 0;
    right: 0;
    margin: auto;
}


.travel-shape {
    position: absolute;
    bottom: 38%;
    right: -24%;
    z-index: -1;
}


/*==================================================
 <-- Namesurf Platform Area Css-->
===================================================*/

.platform-area{
    background: #f9f8f7;
    padding: 120px 0 100px;
    position: relative;
}

.platfomr-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #191d1d;
    font-weight: 400;
    margin-bottom: 50px;
}

.platfomr-shape {
    display: inline-block;
    margin-right: 45px;
}

.platform-thumb {
    position: absolute;
    right: 270px;
}


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

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

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

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

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

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

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

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

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

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

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

.blog-images-link {
    display: flex;
    width: 100%;
    height:100%;
    position: absolute;
    background: rgba(77,166,40,0.4);
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(-20%);
    transition: opacity 500ms ease, transform 500ms ease;
}

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

.blog-images-link a {
    color: #fff;
    font-size: 20px;
}


.blog-content {
    border-radius: 5px;
    filter: drop-shadow(0.5px 0.866px 20px rgba(0,0,0,0.1));
    background-color: #ffffff;
    padding: 34px 34px 44px;
    position: relative;
}

.blog-meta h6 {
    width: 108px;
    height: 31px;
    border-radius: 3px;
    background-color: #4da628;
    color: #fff;
    text-align: center;
    line-height: 31px;
    display: inline-block;
    margin-right: 70px;
}

.blog-meta span {
    font-size: 16px;
    line-height: 34px;
    color: #505050;
    font-weight: 400;
}

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

.blog-title {
    margin: 28px 0 40px;
}

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

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

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

.blog-btn a {
    font-size: 16px;
    color: #505050;
    font-weight: 400;
    text-decoration: none;
    border: 1px solid #007970;
    padding: 17px 16px;
}

.blog-btn a i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #edeaea;
    display: inline-block;
    text-align: center;
    line-height: 32px;
    transition: 0.5s;
}

.blog-single-box:hover .blog-btn a i{
    background: #4da628;
    color: #fff;
}


.blog-comments span {
    font-size: 16px;
    line-height: 34px;
    color: #505050;
    font-weight: 400;
}


/*==================================================
 <-- Namesurf Subscribe Area Css-->
===================================================*/

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

.subscribe-sub-title h4 {
    font-size: 24px;
    line-height: 24px;
    color: #f4f9f5;
    font-weight: 400;
    margin-bottom: 10px;
}

.subscribe-main-title h2 {
    font-size: 48px;
    line-height: 62px;
    color: #f4f9f5;
    font-weight: 800;
    position: relative;
}

.subscribe-main-title h2::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: url(../images/resource/main-title-shape.png);
    background-repeat: no-repeat;
    bottom: -130px;
}

.subscribe-form-field input {
    background: inherit;
    outline: 0;
    border: 0;
    border-bottom: 1px solid #fff;
    width: 600px;
    height: 38px;
    padding: 0px 0px 22px;
    color: #fff;
}

.subscribe-form-field input::placeholder {
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
}

button.subscribe-button {
    background: none;
    outline: none;
    border: none;
    position: relative;
    top: 28px;
    left: 41px;
    font-size: 18px;
    line-height: 62px;
    color: #ffffff;
    font-weight: 400;
}

button.subscribe-button i{
    margin-right:10px
}

.checkbox-box input {
    height: 20px;
    width: 20px;
    position: relative;
    top: 4px;
}

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


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

.footer-area {
    background: #050a0a;
    padding: 116px 0 0px;
    position: relative;
    z-index: 1;
}

.footer-area::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 90px;
    background-color: #080f0f;
    bottom: 0;
    z-index: -1;
}

/* 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: 3px;
    height: 30px;
    background: #4da628;
    bottom: 28px;
    left: -10px;
}

.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: #4da628;
    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 #4da628;
    font-size: 16px;
    color: #FFF;
    transition: .5s;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

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

.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: 36px;
    color: #ffffff;
}

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

.footer-wiget-menu ul li a i {
    color: #4da628;
}

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

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

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

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

/* footer privacy */

.footer-privacy-menu {
    text-align: center;
}

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

.footer-privacy-menu ul li {
    display: inline-block;
    margin-right: 27px;
}

.footer-privacy-menu ul li a {
    font-size: 16px;
    line-height: 27px;
    color: #cacaca;
    font-weight: 400;
    text-decoration: none;
}


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


.breatcome-area {
    background: url(../images/resource/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: #4da628;
    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.inner-page {
    padding: 118px 0 120px;
}

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

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



/*==================================================
 <-- 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: #4da628;
    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(../images/service/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: #4da628;
    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;
}


/* 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: #4da628;
    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;
}

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

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

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

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


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

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

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

/* 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: #4da628 !important;
    transform: skewX(45deg);
}

/* 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: #4da628;
    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: #4da628;
    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-->
=================================================================*/
.blog-area.inner-page {
    padding: 118px 0 120px;
}


/*===============================================================
<-- 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: #4da628;
    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: #4da628;
    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: #4da628;
    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: #4da628;
    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: #4da628;
    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: #4da628;
    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: #4da628;
    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: #4da628;
    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: #4da628;
}

/* 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: #4da628;
    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: #4da628;
}

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

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

/*===============================================================
<-- Namesurf 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: #4da628;
    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: #4da628;
}


/* 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: #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: #4da628;
}

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




/*
<!-- ============================================================== -->
<!-- Namesurf 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: #4da628;
    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: #4da628;
}

.prgoress_scrollup svg path {
    fill: none;
}

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

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


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

.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 #4da628;
    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;
}