/* ---------------------------------------------------------------------
A.  Theme Name: Milestone - Multi Plan Business Website;
B.  Author: Idrak;
C.  Description: All kinds of Business Template;
D.  Tags: business, template, multipurpose, website. agency, digital, marketing, seo, consultation, etc;
E.  Version:1.0;
--------------------------------------------------------------------- */

/* Font family
------------------------------------------
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
--------------------------------------- */

/* Css Index
------------------------------------------
1. Theme default css
2. Common css
   2.1 container width
   2.2 section title
   2.3 Common button
   2.4 Banner section
   2.5 Contact form message
3. Header section
4. Hero section
5. Speciality section
6. Company section
7. Skill section
8. Projects section
9. Testimonial two
10. Testimonial
11. Service section
12. Experience
13. Work sectoin
14. About section
15. Newsletter
16. Footer
17. About page
18. Service page
19. Service details page
20. Work Page
21. Team page
22. Contact page
23. Faq page
24. Login or Register page
25. Error page
26. Blog page
27. Blog sidebar
28. Career section
29. Jobs & Career
30. Comingsoon
31. History section
32. Scroll top
--------------------------------------- */

/* 1. Theme default css
--------------------------------------- */
*{
    margin: 0;
    padding: 0;
}
html{
    overflow-x: hidden;
}
body{
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: #6c7787;
    font-style: normal;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}
::selection {
    background: #f5af19;
    color: #fff;
    text-shadow: none;
}
::-moz-selection {
    background: #f5af19;
    /* Firefox */
    color: #fff;
    text-shadow: none;
}
::-webkit-selection {
    background: #f5af19;
    /* Safari */
    color: #fff;
    text-shadow: none;
}
:active,
:focus {
    outline: none !important;
}
ul, li{
    list-style: none;
    margin: 0;
    padding: 0;
}
a, .button{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
a {
    color: #0d004d;
    text-decoration: none;
    font-weight: 500;
    transition: all linear 0.3s;
    font-size: 16px;
}
a:hover,
a:focus {
    color: #00bf8f;
    text-decoration: none;
}
a img {
    border: none;
}
iframe {
    border: none !important;
}
/* ----- Headings ----- */
h1,h2,h3,h4,h5,h6{
    color: #0d004d;
    margin-top: 0;
    font-style: normal;
    text-transform: normal;
    line-height: 1.3;
    font-family: 'Montserrat', sans-serif;
}
h1,h2, h3{
    font-weight: 700;  
}
h4,h5,h6{
    font-weight: 600;
}
h1{
    font-family: 'Oswald', sans-serif;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
    color: inherit;
}
html,
html a {
    -webkit-font-smoothing: antialiased;
}
img {
    height: auto;
    max-width: 100%;
}
iframe,
embed,
object {
    margin-bottom: 1.5em;
    max-width: 100%;
}
iframe {
    display: block;
    margin: 0;
    max-width: 100%;
}
form label {
    color: #777;
    font-weight: 400;
}
button{
    font-family: 'Roboto', sans-serif;
}
.f-left{
    float: left;
}
.f-right{
    float: right;
}
.fix{
    overflow: hidden;
}
.d-flex{
    display: flex;
}
.clear{
    clear: both;
}
/* 2. Common css
--------------------------------------- */
/* ----- 2.1 Container width ----- */
#default-home .container{
    max-width: 1250px;
}
/* ----- 2.2 Section title ----- */
.section-title h6{
    color: #00bf8f;
    text-transform: uppercase;
}
.section-title h2{
    font-size: 36px;
    color: #0d004d;
    font-weight: 700;
    margin: 10px 0 20px;
}
.section-title p{
    font-size: 20px;
}
/* ----- 3.3 Common button ----- */
/*Button one*/
.cmn-btn-one, .cmn-btn-two {
    padding: 18px 20px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    border: none;
    z-index: 1;
}
.cmn-btn-one {
    background: #00bf8f;
    color: #fff;
}
.cmn-btn-one:after, .cmn-btn-two:after  {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #0d004d;
    transition: all 0.3s ease;
}
.cmn-btn-one:hover:after, .cmn-btn-two:hover:after {
    top: auto;
    bottom: 0;
    height: 100%;
}
.cmn-btn-one:active, .cmn-btn-two:active {
    top: 2px;
}
/*Button two*/
.cmn-btn-two {
    background: #0d004d;
    color: #fff;
}
.cmn-btn-two:after {
    background: #00bf8f;
}
.cmn-btn-two:hover{
    color: #fff;
}
.cmn-btn-one:hover{
    color: #fff;
}
/* ----- 2.4 Banner section ----- */
#banner-section{
    position: relative;
    background: url(../images/banner.jpg);
    padding: 100px 0;
    background-position: center;
    background-attachment: fixed;
    z-index: 0;
}
#banner-section:before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.8);
    z-index: -2;
}
.breadcrumbs h2{
    color: #fff;
}
.breadcrumbs ul li{
    display: inline-block;
    padding: 10px;
}
.breadcrumbs ul li, .breadcrumbs ul li a{
    color: #fff;
    font-size: 18px;
}
.breadcrumbs ul li a.active{
    color: #00bf8f;
}

/* ----- 2.5 Contact form message ----- */
#form-messages {
    color: #fff;
}
/* -------------------------------------------------------------------------------
                                    MAIN CSS
------------------------------------------------------------------------------- */
/* 3. Header section
--------------------------------------- */
#header-section{
    position: absolute;
    width: 100%;
    z-index: 99999;
}
.header-main-menu{
    padding: 20px 0;
}
.header-main-menu nav {
    margin-top: 5px;
}
.header-logo img{
    width: 200px;
}
#header-section.page-header-section .header-menu ul li a{
    color: #fff !important;
}
#header-section.page-header-section .sticky-menu ul li a, #header-section.page-header-section li ul.sub-menu li a{
    color: #000 !important;
}
#header-section.page-header-section ul li a:hover, #header-section.page-header-section li ul.sub-menu li a:hover{
    color: #00bf8f !important;
}
.header-btn {
    margin-top: 12px;
}
.header-btn a{
    padding: 15px 20px;
    color: #fff;
    border-radius: 5px;
    letter-spacing: 1px;
    background: #00bf8f;
}
.header-btn a:hover{
    background: #fff;
    color: #00bf8f;

}
/* Sticky header menu */
.sticky-menu {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,1);
    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    transition: all linear .5s;
}
#sticky-header.sticky-menu .header-logo{
    background: #222;
    max-width: 200px;
    padding: 5px;
}
#sticky-header.sticky-menu .mobile-logo{
    background: #222;
    max-width: 200px;
    padding: 5px;
}
.sticky-menu ul li:hover > ul.submenu {
    top: 135%;
    visibility: visible;
    opacity: 1;
}
/* Hero section
--------------------------------------- */
#hero-section {
    padding: 200px 0 200px;
    background-image: url('../images/hero/dhoop_stick 3.jpg');
    /*background: url(../images/hero/hero-bg-01.jpg);*/
    background-size: cover;
    background-position: unset;
}
.hero-cont h5{
    color: #00bf8f;
}
.hero-cont h1{
    font-size: 58px;
    margin: 10px 0 30px 0;
    color: #fff;
}
.hero-cont p{
    font-size: 20px;
    color: #ddd;
}
.hero-img{
    padding-left: 100px;
    position: relative;
}
.hero-img-one{
    border: 10px solid #fff;
    box-shadow: 0 10px 50px -12px rgba(171,171,171,.9);
}
.hero-img-two{
    position: absolute;
    bottom: -100px;
    right: -50px;
    width: 300px;
    border: 10px solid #fff;
    box-shadow: 0 10px 50px -12px rgba(171,171,171,.9);
}
.hero-img-three{    
    position: absolute;
    top: -50px;
    left: -0px;
    width: 250px;
    border: 10px solid #fff;
    box-shadow: 0 10px 50px -12px rgba(171,171,171,.9);
}
/* Service section
--------------------------------------- */
.speciality-card{
    padding: 30px;
    overflow: hidden;
}
.speciality-card-one{
    background: #00bf8f;
}
.speciality-card-two{
    background: #222;
}
.speciality-card-three{
    background: #222;
}
.speciality-card-four{
    background: #00bf8f;
}
.speciality-card i, .speciality-card h5, .speciality-card p{
    color: #fff;
}
.speciality-card i{
    font-size: 42px;
}
.speciality-card ul li{
    float: left;
}
.speciality-card p{
    margin-top: 20px;
}
.speciality-card ul li:nth-child(1){
    width: 20%;
}
.speciality-card ul li:nth-child(2){
    width: 80%;
}
/*Company text*/
.company-text h5, .company-text i{
    color: #00bf8f;
}
.company-text h2{
    font-size: 42px;
    margin: 10px 0 30px;
}
.company-text ul.company-text-list li{
    padding: 5px 0;
}
.company-text i{
    margin-right: 10px;
}
.company-text-blurb ul li{
    float: left;
}
.company-text-blurb ul li:nth-child(1){
    width: 30%;
}
.company-text-blurb ul li:nth-child(2){
    width: 70%;
    padding-left: 20px;
}
.company-text-blurb ul li span{
    font-size: 48px;
    display: block;
    line-height: 1;
    color: #00bf8f;
    font-weight: 700;
}
.company-text-blurb h5{
    color: #222;
}
.signature{
    width: 200px;
}
/* Skill section
--------------------------------------- */
.skill-content{
    background: url(../images/skills-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}
.skill-overlay{
    background: rgba(13,0,77,.9);
    padding: 70px;
    border-radius: 10px;
}
.skill-text h6{
    margin-bottom: 20px;
    text-transform: uppercase;
}
.skill-text h6, .skill-text h2{
    color: #fff;
}
.skill-text h2{
    font-size: 36px;
    max-width: 450px;
}
.single-progressbar h6{
    color: #fff;
}
.skill-btn a{
    border: 1px solid #fff;
    padding: 15px 20px;
}

.skill-btn a:hover{
    border: 1px solid #00bf8f;
    color: #fff;
}
/*Hero video button*/
#skill-section{
    position: relative;
}
.video-btn {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 40%;
    left: 67%;
    border-radius: 50%;
}
.video-btn a{
    position: absolute;
    height: 100px;
    width: 100px;
    line-height: 110px;
    background: rgba(255,255,255,.5);
    border-radius: 50%;
    color: #fff;
    text-align: center;
    animation: animate 3s linear infinite;
    z-index: 3;
}
.video-btn a i{
    color: #00bf8f;
    font-size: 30px;
}
.video-btn a:after{
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 130%;
    width: 130%;
    background: rgba(255,255,255,.5);
    border-radius: 50%;
    z-index: -2;
}
.video-btn a:before{
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 155%;
    width: 155%;
    background: rgba(255,255,255,.5);
    border-radius: 50%;
    z-index: -1;
}
@keyframes animate{
    0%{
        box-shadow: 0 0 0 0 rgba(252,255,255,.5), box-shadow: 0 0 0 0 rgba(255,255,255,.5);
    }
     40%{
        box-shadow: 0 0 0 50px rgba(255,255,255,.5), box-shadow: 0 0 0 0 rgba(255,255,255,.5);
    }
     80%{
        box-shadow: 0 0 0 50px rgba(255,255,255,.5);
    }
     100%{
        box-shadow: 0 0 0 0 rgba(255,255,255,.5);
    }
}
/* Projects section
--------------------------------------- */
.project-title h2{
    margin-top: 20px;
    font-size: 48px;
}
.project-desc p span {
    background-color: transparent;
    color: var(--theme-color-text_dark);
    font-size: 57px;
    height: 55px;
    line-height: 52px;
    margin: 0;
    text-align: left;
    width: auto !important;
    max-width: 50px;
    padding-right: 20px;
    float: left;
    display: block;
    overflow: hidden;
    color: #00bf8f;
}
.project-item{
    float: left;
    width: 33.33%;
    position: relative;
    overflow: hidden;
    transition: all linear .3s;
}
.project-item:hover{
    transform: scale(1.05);
    z-index: 99;
}
.project-item:before, .project-item:after{
    position: absolute;
    content: "";
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 9;
    transition: all linear .3s;
}
.project-item:after{
    top: 0%;
    left: 50%;
    width: 1px;
    height: 80px;
}
.project-item:before{
    top: 50%;
    left: 0%;
    width: 80px;
    height: 1px;
}
.project-item:hover:after{
    top: 50%;
}
.project-item:hover:before{
    left: 50%;
}
.project-item-overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.8));
}
.project-item:hover .project-item-overlay{
    background: linear-gradient(to bottom, rgba(0,0,0,.56), rgba(0,191,143, .8));
}
.project-item img{
    width: 100%;
}
.project-item-text{
    position: absolute;
    left: 20px;
    bottom: 30px;
    z-index: 9;
}
.project-item-text h4{
    max-width: 250px;
    color: #fff;
}
.project-item-btn{
    position: absolute;
    bottom: 40px;
    left: 50%;
    z-index: 9;
    transition: all linear .3s;
    opacity: 0;
}
.project-item-btn i{
    color: #fff;
    font-size: 24px;
    height: 50px;
    width: 50px;
    line-height: 55px;
    border: 1px solid transparent;
    display: block;
    text-align: center;
    border-radius: 50%;
}
.project-item:hover .project-item-btn{
    left: 80%;
    opacity: 1;
}
.project-item:hover .project-item-btn i{
    left: 80%;
    opacity: 1;
    height: 50px;
    width: 50px;
    line-height: 55px;
    border: 1px solid #fff;
}
/* Testimonial section
--------------------------------------- */
#testimonial-two-section{
    background: url(../images/contact-us-map.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.testimonial-two-review{
    text-align: right;
    padding-right: 50px;
    border-right: 1px solid #00bf8f;
    max-width: 350px;
    float: right;
}
.testimonial-two-review ul li{
    display: inline-block;
}
.testimonial-two-review ul li i{
    color: #00bf8f;
}
.testimonial-two-review p{
    font-size: 24px;
    margin: 20px 0;
}
.testimonial-two-btn a {
    position: relative;
    padding-right: 50px;
}
.testimonial-two-btn a i{
    position: absolute;
    right: 0;
    top: -7px;
    height: 35px;
    width: 35px;
    line-height: 40px;
    text-align: center;
    background: #00bf8f; 
    color: #fff;
    border-radius: 50%;
    display: block;
}
.testimonial-two-author{
    padding-left: 20px;
    max-width: 400px;
}
.testimonial-two-author img{
    width: 150px;
    padding: 20px 0;
}
/* Service section
--------------------------------------- */
#service-section{
    background: url(../images/service/service-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.service-item{
    padding: 50px 30px;
    box-shadow: 0 10px 50px -12px rgba(171,171,171,.9);
}
.service-item i{
    font-size: 42px;
}
.service-item h5{
    margin-bottom: 20px;
}
.service-item h5, .service-item p, .service-item i{
    color: #fff;
}
.service-item-one{
    background: #00bf8f;
}
.service-item-two{
    background: #222;
}
.service-item-three{
    background: #fff;
    margin-top: 25px;
}
.service-item-three h5, .service-item-three p, .service-item-three i{
    color: #222;
}
.service-title{
    margin-top: 250px;
}

/* Experience
--------------------------------------- */
#experience-notice-section{
    background: #0d004d;
    position: relative;
    padding: 60px 0;
}
.experience-notice-title h2{
    color: #fff;
    font-size: 48px;
}
.experience-notice-number h3{
    top: -140px;
    right: 150px;
    position: absolute;
    font-size: 400px;
    color: #fff;
}
/* Work sectoin
--------------------------------------- */
.work-title {
    text-align: right;
    margin-top: 350px;
}
.work-title h2{
    font-size: 42px;
    text-transform: uppercase;
    font-style: italic;
}
.work-title h2 span{
    display: block;
}
.work-item-title h3{
    font-size: 100px;
    line-height: 1;
    opacity: .2;
}
.work-item img{
    transition: all linear .3s;
}
/* About section
--------------------------------------- */
#about-section{
    background: url(../images/about-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.about-card{
    box-shadow: 0 10px 50px -12px rgba(171,171,171,.9);
    padding: 30px;
    background: #fff;
    overflow: hidden;
}
.about-card ul li{
    float: left;
}
.about-card ul li:nth-child(1){
    width: 25%;
}
.about-card ul li:nth-child(2){
    width: 75%;
}
.about-card ul li i{
    font-size: 42px;
    color: #00bf8f;
    line-height: 1.5;
}
/* 29. Scroll top
--------------------------------------- */
.testimonial-img img{
    border-radius: 80% 45% 65% 85% / 85% 35% 49% 55%;
    transition: all linear .3s;
}
.testimonial-img img:hover{
    border-radius: 41% 44% 56% 59%;    
}
.testimonial-text{
    position: relative;
    padding-left: 30px;
}
.testimonial-text h6{
    margin: 15px 0 10px;
    color: #00bf8f;
}
.testimonial-text img{
    opacity: .5;
}
.testimonial-text ul li{
    display: inline-block;
}
.testimonial-text ul li i{
    color: #00bf8f;    
}
.testimonial-quote {
    position: absolute;
    bottom: -50px;
    right: 0;
}
.testimonial-quote i{
    font-size: 100px;
    opacity: .1;
}
/* 29. Scroll top
--------------------------------------- */
#newsletter-section .newsletter{
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.04);
    padding: 50px;
    background: #0d004d;
}
.newsletter-text{
    margin-top: 18px;
}
.newsletter-text h4{
    color: #fff;
}
.newsletter-form{
    position: relative;
}
.newsletter-form input{
    width: 100%;
    padding: 20px 20px;
    border: none;
    border-radius: 5px;
    background: #e9f0f6;
    color: #6c7787;
}
.newsletter-form button {
    position: absolute;
    top: 0;
    right: 0px;
    height: 69px;
    width: 100px;
    line-height: 70px;
    background: #00bf8f;
    color: #fff;
    border: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
/* 29. Scroll top
--------------------------------------- */
#footer-section .footer{
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.04);
    padding: 50px;
    background: #e9f0f6;
}
.footer-cmn h5{
    margin-bottom: 20px;
}
.footer-cmn p{
    font-size: 14px;
}
.footer-cmn p small{
    color: #1c92d2;
    font-size: 15px;
}
.footer-cmn p span{
    display: block;
}
.footer-btn a{
    padding: 12px 20px;
    background: #00bf8f;
    color: #fff;
    font-size: 15px;
    border-radius: 5px;
}
.footer-btn a:hover{
    background: #0d004d;    
}
.footer-live-chat h5{
    margin-bottom: 35px;
}
/* About page
--------------------------------------- */
.about-detl-left{
    text-align: right;
    padding-right: 50px;
}
.about-detl-left h2{
    margin: 20px 0;
}
.about-detl-right h3{
    margin-bottom: 50px;
}
.about-detl-right ul li{
    float: left;
}
.about-detl-right ul li:nth-child(1){
    width: 10%;
}
.about-detl-right ul li:nth-child(2){
    width: 90%;
}
.about-detl-right ul li:nth-child(1) i{
    height: 30px;
    width: 30px;
    line-height: 35px;
    font-size: 14px;
    background: #00bf8f;
    color: #fff;
    display: block;
    text-align: center;
    border-radius: 50%;
}
.about-detl-right p{
    margin-bottom: 0;
}
/* Service section
--------------------------------------- */
#service-overview-section{
    background: url(../images/service/service-overview-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.service-overview-overlay{
    background: url(../images/service/service-bg-shape.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}
#all-service-section .service-item{
    margin: 12px 0;
}
#featured-service-section{
    position: relative;
}
.featured-service-title{
    padding-right: 50px;
    text-align: right;
}
.featured-service-title:before, .featured-service-title:after{
    position: absolute;
    content: "";
    height: 5px;
    width: 200px;
    transform: rotate(-30deg);
    opacity: .1;
}
.featured-service-title:before{
    top: 25%;
    left: 0;
    background: #00bf8f;
}
.featured-service-title:after{
    top: 30%;
    left: 0;
    background: #0d004d;
}
.featured-service-title h2{
    font-size: 48px;
}
.featured-service-list h4{
    margin-bottom: 30px;
}
.featured-service-list ul li{
    position: relative;
    margin-left: 35px;
    padding: 5px 0;
}
.featured-service-list ul li i{
    position: absolute;
    left: -35px;
    top: 3px;
    color: #00bf8f;
}
/* Service details page
--------------------------------------- */
.service-details-title{
    position: relative;
    padding: 0 0 0 100px;
}
.service-details-title:before, .service-details-title:after{
    position: absolute;
    content: "";
    width: 200px;
    height: 700px;
}
.service-details-title:before{
    top: 10%;
    left: 28px;
    background: #00bf8f;
    z-index: -1;
}
.service-details-title:after{
    top: 20%;
    left: -50px;
    background: #0d004d;
    z-index: -2;
}
.service-details-title img{
    margin-bottom: 50px;
}
.service-details h2{
    font-size: 42px;
    padding: 0 0 50px 150px;
}
.service-detl-desc{
    padding: 0 0 0 200px;
}
.service-detl-desc p{
    margin-top: 20px;
}
.sidebar-notice{
    background: #222;
    padding: 30px;
    overflow: hidden;
}
.sidebar-notice h5, .sidebar-notice p, .sidebar-notice li{
    color: #fff;
}
.sidebar-notice h5{
    color: #00bf8f;
    margin-bottom: 30px;
}
.sidebar-notice ul li{
    float: left;
    font-size: 20px;
}
.sidebar-notice ul li i{
    color: #00bf8f;
    font-size: 24px;
    margin-right: 20px;
}
.sidebar-download{
    background: #e9f0f6;
    padding: 30px;
}
.sidebar-download ul li{
    margin: 20px 0;
}
.sidebar-download ul li a{
    padding: 20px;
    color: #fff;
    display: block;
    font-size: 18px;
}
.sidebar-download ul li a i{
    margin-right: 10px;
    font-size: 24px;
}
.sidebar-download ul li a.brochures{
    background: #00bf8f;
}
.sidebar-download ul li a.company-profile{
    background: #0d004d;
}
.service-detl-item{
    box-shadow: 0 0px 50px -12px rgba(171,171,171,.3);
    background: #e9f0f6;
    overflow: hidden;
    padding: 30px;
}
.service-detl-item ul li{
    float: left;
}
.service-detl-item ul li i{
    font-size: 42px;
}
.service-detl-item ul li i{
    color: #00bf8f;
}
.service-detl-item h6{
    font-size: 18px;
}
.service-detl-subset ul li{
    float: left;
}
.service-detl-subset ul li:nth-child(1){
    width: 15%;
}
.service-detl-subset ul li:nth-child(2){
    width: 85%;
}
.service-detl-subset ul li:nth-child(1) i{
    height: 35px;
    width: 35px;
    line-height: 40px;
    text-align: center;
    background: #00bf8f;
    display: block;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
}
/* Work Page
--------------------------------------- */
.work-item-text p{
    color: #00bf8f;
    font-size: 15px;
    margin: 0;
}
/* Team page
--------------------------------------- */
.team-item{
    position: relative;
    overflow: hidden;
}
.team-item:before{
    position: absolute;
    content: "";
    top: -100px;
    left: 0%;
    height: 20%;
    width: 20%;
    background: rgba(0,191,143, 1);
    transition: all linear .5s;
    clip-path: circle(50% at 50% 50%);
}
.team-item:hover:before{
    clip-path: circle(50% at 50% 50%);
    background: rgba(0,191,143, 0);
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.team-item:after{
    position: absolute;
    content: "";
    top: 50%;
    right: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 200px;
    border-radius: 50%;l
    background: rgba(13,0,77, 0);
    transition: all linear .5s;
}
.team-item:hover:after{
    right: 75%;
    background: rgba(0,191,143, 1);
}
.team-iteam-social{
    position: absolute;
    top: 50%;
    left: -50px;
    transform: translateY(-50%);
    z-index: 3;
    transition: all linear .5s;
}
.team-iteam-social i{
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    color: #00bf8f;
    background: #fff;
    margin: 2px 0;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.team-item:hover .team-iteam-social{
    left: 25px;
}
.team-item-text{
    padding: 20px 30px;
    box-shadow: 0 10px 50px -12px rgba(171,171,171,.5);
}
.team-item-text h4{
    color: #00bf8f;
}
.team-item-text span{
    color: #0d004d;
}
/* Contact page
--------------------------------------- */
.contact-content{
    position: relative;
}
.contact-content:before, .contact-content:after{
    position: absolute;
    content: "";
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.contact-content:before{
    top: 10%;
    right: 0;
    width: 300px;
    height: 300px;
    background: rgba(0,191,143,.8);
    animation: contactShapeOne 5s linear infinite;
}
.contact-content:after{
    top: 10%;
    right: 150px;
    width: 300px;
    height: 300px;
    background: rgba(13,0,77,.8);
    animation: contactShapeTwo 5s linear infinite;
}
@keyframes contactShapeOne{
    0%, 100%{
        transform: translateY(20px);
    }
    40%{
        transform: translateY(-20px);        
    }
    80%{
        transform: translateY(40px);        
    }
}
@keyframes contactShapeTwo{
    0%, 100%{
        transform: translateY(-20px);
    }
    40%{
        transform: translateY(20px);        
    }
    80%{
        transform: translateY(-40px);        
    }
}
.contact-text{
    max-width: 750px;
}
.contact-text h2{
    position: relative;
    font-size: 48px;
}
.contact-text h2:before{
    position: absolute;
    content: "";
    top: 155px;
    left: 0;
    width: 100px;
    border: 1px solid #0d004d;
}
.contact-text p{
    margin: 70px 0 0 0;
}
.contact-text h3{
    margin-top: 50px;
}
.contact-text h6{
    margin-top: 20px;
}
.contact-form-left{
    background: url(../images/contact-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.contact-form-cmn{
    float: left;
    height: 700px;
    overflow: hidden;
}
.contact-form-left{
    width: 40%;
}
.contact-form-right{
    width: 60%;
    padding: 70px;
    background: linear-gradient(to left, rgba(0,191,143,1), rgba(13,0,77,1));
}
.contact-form-right h4{
    color: #fff;
}
.contact-form-right input, .contact-form-right textarea{
    width: 100%;
    background: rgba(255,255,255,.3);
    border: none;
    padding: 15px 10px;
    margin-bottom: 30px;
    color: #fff;
}
.contact-form-right button{
    width: 200px;
    padding: 20px 0;
    border: 0;
    background: #00bf8f;
    color: #fff;
    transition: all linear .5s;
}
.contact-form-right button i{
    margin-right: 10px;
}
.contact-form-right button:hover{
    background: #0d004d;
}
/* Faq page
--------------------------------------- */
.faq-detl h3, .faq-detl h6{
    font-weight: 400;
}
.faq-detl-title{
    position: relative;
}
.faq-detl-title:before{
    position: absolute;
    content: "";
    left: 0;
    bottom: -10px;
    width: 200px;
    border: 1px solid #00bf8f;
}
.faq-detl ul li h5{
    margin-bottom: 20px;
}
.accordion-item button{
    font-size: 20px;
}
.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #00bf8f;
}
.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}
.accordion-item:first-of-type .accordion-button {
    border-radius: 0;
}
.accordion-button{
    border: none;
    padding: 15px 20px;
}
.accordion-collapse {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.accordion-body {
    background: #e9f0f6;
}
.faq-promo{
    background: url(../images/faq.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.faq-promo-overlay{
    background: linear-gradient(to left, rgba(0,191,143,.8), rgba(13,0,77,.9));
    padding: 100px;
}
.faq-promo h1{
    color: #00bf8f;
    font-size: 92px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
}
.faq-promo p{
    color: #fff;
    margin-top: 50px;
    font-size: 20px;
}
/* Login or Register page
--------------------------------------- */
.login-form{
    border-top: 2px dotted #00bf8f;
    padding: 100px;
    box-shadow: 0 10px 50px -12px rgba(171,171,171,.9);
}
.login-form h4{
    margin: 0 0 50px 0;
}
.login-form input{
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 30px;
    border: none;
    background: #e9f0f6;
}
.login-form button{
    background: #00bf8f;
    padding: 15px;
    width: 150px;
    border: none;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.forgot-pass-link a:hover{
    color: #00bf8f;
}
/*----- 25.1 Check box -----*/
.checked-box {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  margin: 10px 0 30px;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checked-box input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #e9f0f6;
}
.checked-box:hover input ~ .checkmark {
  background-color: #ccc;
}
.checked-box input:checked ~ .checkmark {
    background: #00bf8f;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checked-box input:checked ~ .checkmark:after {
  display: block;
}
.checked-box .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Error page
--------------------------------------- */
.error h2{
    font-size: 200px;
    font-weight: 400;
    line-height: 1.1;
}
.error h3{
    margin: 20px 0;
}
.error-btn a{
    padding: 15px 20px;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 5px;
}
/* Blog page
--------------------------------------- */
.blog-item{
    box-shadow: 0 10px 50px -12px rgba(171,171,171,.6);
    padding: 10px;
}
.blog-item-img{
    position: relative;
}
.blog-item-date{
    position: absolute;
    top: -25px;
    left: -25px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    padding-top: 5px;
}
.blog-item-date-one{
    background: #00bf8f;
}
.blog-item-date-two{
    background: #0d004d;
}
.blog-item-date span, .blog-item-date small{
    display: block;
    margin: 0;
    line-height: 1.3;
    color: #fff;
}
.blog-item-date span{
    font-size: 28px;
}
.blog-item-date small{
    font-size: 14px;
}
.blog-item-text{
    padding: 10px 20px;
}
.blog-item-text h4{
    transition: all linear .3s;
}
.blog-item-text h4:hover{
    color: #00bf8f;
}
.blog-item-info span{
    margin-right: 10px;
    font-size: 12px;
    color: #0d004d;
    text-transform: uppercase;
}
.blog-item-info i{
    color: #00bf8f;
    margin-right: 5px;
}
.blog-item-btn{
    margin-top: 20px;
}
.blog-item-btn a{
    position: relative;
    font-weight: 400;
}
.blog-item-btn a:before, .blog-item-btn a:after{
    position: absolute;
    content: "";
    width: 5px;
    border: 1px solid #00bf8f;
    transition: all linear .3s;
}
.blog-item-btn a:before{
    bottom: -5px;
    left: 0;
}
.blog-item-btn a:after{
    top: -5px;
    right: 0;
}
.blog-item-btn a:hover:before{
    width: 100%;
}
.blog-item-btn a:hover:after{
    width: 100%;
}
/* Blog sidebar
--------------------------------------- */
.sidebar-search{
    position: relative;
}
.sidebar-search input{
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    color: #6c7787
}
.sidebar-search button {
    position: absolute;
    top: 0px;
    right: 0;
    height: 50px;
    width: 50px;
    line-height: 55px;
    background: #00bf8f;
    border: none;
}
.sidebar-search button i{
    color: #fff;
}
.sidebar-recent-post h4{
    line-height: 1;
    margin-top: -5px;
}
.sidebar-recent-post ul li{
    float: left;
}
.sidebar-recent-post ul li:nth-child(1){
    width: 40%;
}
.sidebar-recent-post ul li:nth-child(2){
    width: 60%;
    padding-left: 20px;
}
.sidebar-recent-post ul li h6{
    transition: all linear .3s;
}
.sidebar-recent-post ul li h6:hover{
    color: #00bf8f;
}
.blog-social-share{
    padding: 30px;
}
.blog-social-share ul li{
    display: inline-block;
}
.blog-social-share ul li a{
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    background: #0d004d;
    color: #fff;
    font-weight: 400;
    border-radius: 5px;
}
.comment-form{
    padding: 30px;
}
.comment-form h5{
    margin-bottom: 20px;
}
.comment-form input, .comment-form textarea{
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #ddd;
    margin-bottom: 30px;
}
.comment-form button{
    border: none;
    background: #0d004d;
    padding: 15px 20px;
    color: #fff;
    transition: all linear .3s;
}
.comment-form button i{
    margin-right: 5px;
}
.comment-form button:hover{
    background: #00bf8f;
}
/* Career section
--------------------------------------- */
.career h2{
    font-size: 62px;
    margin-bottom: 50px;
}
.recruiter-item span{
    font-size: 36px;
    display: block;
    height: 80px;
    width: 80px;
    line-height: 80px;
    background: #00bf8f;
    color: #fff;
    text-align: center;
    margin: auto;
    border-radius: 50%;
}
.recruiter-item h5{
    margin: 30px 0 20px;
}
.recruiter-item p{
    font-size: 14px;
    margin: 0;
}
.recruiter-process{
    position: relative;
}
.recruiter-process::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 36%;
    width: 75%;
    border: 1px solid #00bf8f;
    margin: auto;
    z-index: -1;
}
/* 29. Scroll top
--------------------------------------- */
.table tr{
}
.table th{
    background: #0d004d;
    color: #fff;
    padding: 15px;
}
.table td{
    padding: 15px;
}
.job-form input, .job-form select, .job-form textarea{
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 30px;
    background: #e9f0f6;
    border: none;
}
.job-form select{
    padding: 20px;
}
.job-form button{
    border: none;
    padding: 20px 50px;
    background: #00bf8f;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
/* 29. Scroll top
--------------------------------------- */
#comingsoon-one-section{
    background: url(../images/comingsoon.jpg);
    background-size: cover;
    background-position: center;
    padding: 210px 0;
}
#comingsoon-two-section{
    background: url(../images/comingsoon-2.jpg);
    background-size: cover;
    background-position: center;
    padding: 210px 0;
}
.comingsoon-title-two h2, .comingsoon-title-two h6{
    color: #fff;
}
.comingsoon-title-one h2, .comingsoon-title-two h2{
    font-size: 48PX;
}
#countdown{
    width: 465px;
    height: 160px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 10px 50px -12px rgba(0,0,0,.9);
    margin: auto;
    padding: 24px 0;
    position: relative;
}
#countdown:before{
    content:"";
    width: 8px;
    height: 65px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    display: block;
    position: absolute;
    top: 48px; left: -10px;
}
#countdown:after{
    content:"";
    width: 8px;
    height: 65px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    display: block;
    position: absolute;
    top: 48px; right: -10px;
}
#countdown #tiles{
    position: relative;
    z-index: 1;
}
#countdown #tiles > span{
    width: 92px;
    max-width: 92px;
    font: bold 48px 'Droid Sans', Arial, sans-serif;
    text-align: center;
    color: #111;
    background-color: #ddd;
    background-image: -webkit-linear-gradient(top, #bbb, #eee); 
    background-image:    -moz-linear-gradient(top, #bbb, #eee);
    background-image:     -ms-linear-gradient(top, #bbb, #eee);
    background-image:      -o-linear-gradient(top, #bbb, #eee);
    border-top: 1px solid #fff;
    border-radius: 3px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
    margin: 0 7px;
    padding: 18px 0;
    display: inline-block;
    position: relative;
}
#countdown .labels{
    width: 100%;
    height: 25px;
    text-align: center;
    position: absolute;
    bottom: 8px;
}
#countdown .labels li{
    width: 102px;
    font: bold 15px 'Droid Sans', Arial, sans-serif;
    color: #fff;
    text-shadow: 1px 1px 0px #000;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
}
/* History section
--------------------------------------- */
.history-text{
    padding-left: 50px;
}
.history-text h2, .history-detl-text h2{
    font-size: 52px;
    font-weight: 400;
}
.history-text h5, .history-detl-text h5{
    margin: 20px 0;
    font-weight: 500;
}
.history-text p{
    font-size: 22px;
}
.history-btn a{
    color: #00bf8f;
    border-bottom: 1px solid #00bf8f;
    padding-bottom: 2px;
}
.history-detl-img{
    position: relative;
}
.history-detl-img-one{
    position: absolute;
}
.history-detl-item i{
    display: block;
    font-size: 60px;
    line-height: 1;
    color: #00bf8f;
}
.history-detl-item span{
    display: block;
    font-size: 36px;
    line-height: 1;
    margin: 20px 0;
}
/* 29. Scroll top
--------------------------------------- */
.scrollToTop{
    position: fixed;
    bottom: 20px;
    left: 50px;
    border: none;
    background: #0d004d;
    color: #fff;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50px;
    font-weight: 700;
    display: none;
    z-index: 999;
    font-size: 28px;
}
.scrollToTop:hover,.scrollToTop:focus{
    background: #F7971E;
    color: #fff;
}
.scrollToTop i{
    position: absolute;
    top: 55%;
    left: 60%;
    transform: translate(-60%, -50%) rotate(-45deg);
}