/* ---------------------------------------------------------------------
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. Service section
6. Experience section
7. Work section
8. About section
9. Testimonial section
10. Newsletter section
11. Footer section
12. About page
13. Service page
14. Service details page
15. Work Page
16. Team page
17. Contact page
18. Faq page
19. Login or Register page
20. Error page
21. Blog page
22. Blog sidebar
23. Career section
24. Comingsoon
25. History section
26. 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: #0072ff;
    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: #0072ff;
}
.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: #0072ff;
    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;
}
.cmn-btn-one:hover{
    color: #fff;
}
/*Button two*/
.cmn-btn-two {
    background: #0d004d;
    color: #fff;
}
.cmn-btn-two:after {
    background: #0072ff;
    color: #fff;
}
.cmn-btn-two: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: #0072ff;
}

/* ----- 2.5 Contact form message ----- */
#form-messages {
    color: #fff;
}
/* -------------------------------------------------------------------------------
                                    MAIN CSS
------------------------------------------------------------------------------- */
/* 3. Header section
--------------------------------------- */
/*Header top*/
.header-top{
    background: #0072ff;
    padding: 7px 10px;
}
.header-info p{
    color: #fff;
    margin: 5px 0 0;
}
.header-info i{
    line-height: 1;
    color: #fff;
}
.header-info span{
    font-size: 16px;
}
.header-social ul li {
    display: inline-block;
    margin: 5px;
}
.header-main-menu{
    padding: 20px 0;
}
.header-main-menu nav{
    margin-top: 4px;
}
.header-logo img{
    width: 200px;
}
.header-btn {
    margin-top: 13px;
}
.header-btn a{
    padding: 15px 20px;
    background: #0072ff;
    color: #fff;
    border-radius: 5px;
    letter-spacing: 1px;
}
.header-btn a:hover{

}
/* 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-menu .header-logo img{
    width: 150px;
}
.sticky-menu ul li:hover > ul.submenu {
    top: 135%;
    visibility: visible;
    opacity: 1;
}
.sticky-menu nav{
    margin-top: 0;
}
/* Hero section
--------------------------------------- */
#hero-section{
    background: url(images/hero/hero-bg-01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.hero-section-overlay{
    background: rgba(0,0,0,.8);
    padding: 100px 100px 100px 130px;
    width: 45%;
}
.hero-cont h1{
    color: #fff;
    font-size: 100px;
    text-transform: uppercase;
    font-weight: 900;
}
.hero-cont h5{
    margin-top: 20px;
    color: #0072ff;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.8;
    max-width: 70%;
}
/* 5. Speciality section
--------------------------------------- */
.speciality-card{
    padding: 30px;
    overflow: hidden;
}
.speciality-card-one{
    background: #0072ff;
}
.speciality-card-two{
    background: #222;
}
.speciality-card-three{
    background: #222;
}
.speciality-card-four{
    background: #0072ff;
}
.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%;
}
/* 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: #0072ff;
}
.service-item-two{
    background: #222;
}
.service-item-three{
    background: #fff;
}
.home-service-item-three{
    margin-top: 25px;
}
.service-item-three h5, .service-item-three p, .service-item-three i{
    color: #222;
}
.service-title{
    margin-top: 250px;
}

/* 6. Company section
--------------------------------------- */
.company-text h5, .company-text i{
    color: #0072ff;
}
.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: #0072ff;
    font-weight: 700;
}
.company-text-blurb h5{
    color: #222;
}
.signature{
    width: 200px;
}
/* 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: 120px;
    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;
}



/* 8. 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: #0072ff;
}
.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,114,255, .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;
}

/* 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: #0072ff;
    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: #0072ff;
}
.testimonial-text img{
    opacity: .5;
}
.testimonial-text ul li{
    display: inline-block;
}
.testimonial-text ul li i{
    color: #0072ff;    
}
.testimonial-quote {
    position: absolute;
    bottom: -50px;
    right: 0;
}
.testimonial-quote i{
    font-size: 100px;
    opacity: .1;
}

/* 29. Scroll top
--------------------------------------- */
#newsletter-section .newsletter{
    background: #e9f0f6;
    padding: 50px;
}
.newsletter-text{
    margin-top: 18px;
}
.newsletter-form{
    position: relative;
}
.newsletter-form input{
    width: 100%;
    padding: 20px 20px;
    border: none;
    border-radius: 5px;
    color: #6c7787;
}
.newsletter-form button {
    position: absolute;
    top: 0;
    right: 0px;
    height: 69px;
    width: 100px;
    line-height: 70px;
    background: #0072ff;
    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;
}
.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: #0072ff;
    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: #0072ff;
    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: #0072ff;
}
.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: #0072ff;
}




/* Service details section
--------------------------------------- */
.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: #0072ff;
    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: #0072ff;
    margin-bottom: 30px;
}
.sidebar-notice ul li{
    float: left;
    font-size: 20px;
}
.sidebar-notice ul li i{
    color: #0072ff;
    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: #0072ff;
}
.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 i{
    font-size: 42px;
}
.service-detl-item ul li i{
    color: #0072ff;
}
.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: #0072ff;
    display: block;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
}

/* Work Page
--------------------------------------- */
.work-item-text p{
    color: #0072ff;
    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,144,255, 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,144,255, 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,144,255, 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: #0072ff;
    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: #0072ff;
}
.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,144,255,.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,144,255,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: #0072ff;
    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 #0072ff;
}
.faq-detl ul li h5{
    margin-bottom: 20px;
}
.accordion-item button{
    font-size: 20px;
}
.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #0072ff;
}
.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,144,255,.8), rgba(13,0,77,.9));
    padding: 100px;
}
.faq-promo h1{
    color: #0072ff;
    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 #0072ff;
    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: #0072ff;
    padding: 15px;
    width: 150px;
    border: none;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.forgot-pass-link a:hover{
    color: #0072ff;
}
/*----- 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: #0072ff;
}
.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: #0072ff;
}
.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: #0072ff;
}
.blog-item-info span{
    margin-right: 10px;
    font-size: 12px;
    color: #0d004d;
    text-transform: uppercase;
}
.blog-item-info i{
    color: #0072ff;
    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 #0072ff;
    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: #0072ff;
    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: #0072ff;
}
.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: #0072ff;
}




/* 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: #0072ff;
    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 #0072ff;
    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: #0072ff;
    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: #0072ff;
    border-bottom: 1px solid #0072ff;
    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: #0072ff;
}
.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: #0072ff;
    color: #fff;
}
.scrollToTop i{
    position: absolute;
    top: 55%;
    left: 60%;
    transform: translate(-60%, -50%) rotate(-45deg);
}