@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/*----------------------------------------------------------------
    Branding Colour
----------------------------------------------------------------*/
#header2b a,
#header2a a, 
#header2a a:hover,
footer a:hover, 
.btn,  
.contact_detail a, 
.contact_detail a:hover,
.btn:hover, 
.btn:focus, 
.btn:active, 
.formbuilder-form input#submit-form,
.formbuilder-form input#submit-form:hover, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form:hover {
    text-decoration: none;
}

/*----------------------------------------------------------------
    Custom Styles
----------------------------------------------------------------*/
h1, 
h2, 
h3,
h4,
h5,
#header2a,
.btn, 
.formbuilder-form input#submit-form, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form {
    font-family: 'Open Sans', sans-serif;
} 

/*----------------------------------------------------------------
- Form
----------------------------------------------------------------*/

.form, #quote_form_form, 
#extraFormsContainer .modal-dialog {
    background-color:rgba(2,109,38,0.8);
}

.formbuilder-form label  {
    color: #fff;
    font-weight:400;
}

.formbuilder-form input, 
.formbuilder-form textarea, 
.formbuilder-form select, 
.formbuilder-form select option {
    background-color:#faf9f9;
}    

/*----------------------------------------------------------------
- Buttons
----------------------------------------------------------------*/
#banner .btn {
    background: transparent;
    border:2px solid #fff;
    color: #fff;
}

#content .btn,
.formbuilder-form input#submit-form, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form {
     background-color:#153f89;
     color: #fff;
}

#banner .btn,
#content .btn,
.formbuilder-form input#submit-form, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form {
    font-weight:bold;
    transition: all 0.8s ease 0s;
}

#content .btn:hover:after,
#banner .btn:hover:after {
    content:'\f054';
    font-family:'FontAwesome';
    padding-left:5px;
    transition: all 0.8s ease 0s;
}
/*----------------------------------------------------------------
- Header
----------------------------------------------------------------*/

header span, 
#header2a a,
#header2b a, 
#header2b a:hover,
#header2a:before {
    color: rgba(2,109,38,0.9);
}

#header2a:before {
    font-size:35px;
}

#header2a a,
header span {
    font-weight:900;
    font-size:34px;
}

#header2b {
    line-height: 14px;
    padding-bottom:19px;
    font-size:22px;
    font-weight:400;
}

#header2{
    padding-bottom: 22px;
}

#header {
    padding-top:10px;
}
/*----------------------------------------------------------------
- Banner 
----------------------------------------------------------------*/
#banner {
    padding: 130px 0 100px 0;
}

#banner h1,
#banner hr {
    color:#fff;
}

#banner p {
  color:#fff;
  font-weight:100;
}

#banner h1 {
    font-size:53px;
    font-weight:300;
}

#banner strong {
    font-size:55px;
    font-weight:600;
}

.banner_cover {
    opacity:1;
    background-color: #fff;
}
/*----------------------------------------------------------------
    Service
----------------------------------------------------------------*/
#services {
    padding:10px 0 0 0;
    background-color: #ffffff;
}

#services h3 {
    color:#153f89;
    font-weight: 600;
    font-size:23px;
    padding-bottom:8px;
}

#services p {
    font-weight:100;
    color: #333;
}

.serviceImg {
    background-color: #153f89;
    border:5px double #ffffff;
    border-radius: 50%;
    padding:50px;
    transition: all 0.4s ease 0s;
}

#service1,
#service2,
#service3,
#service4 {
    padding: 5% 4% 5% 4%;
    transition: all 0.4s ease 0s;
}

#service1:hover,
#service2:hover,
#service3:hover,
#service4:hover {
    transform: scale(1.1);
}

/*----------------------------------------------------------------
- Content
----------------------------------------------------------------*/

#content {
    padding: 100px 0 0px;
    background-color: rgb(246, 245, 243);
}

#contact h1,
#contact h2,
#contact h3,
#content h1,
#content h2,
#content h3,
#content h4 {
    font-weight:bold;
    color: rgba(2,109,38,0.9);
}

#content .btn {
    width:100%;
}

#content strong {
    font-weight: 400;
}

#content .img {
    
    border:10px double #ffffff;
    /* border: 10px solid #fff; */
}

blockquote {
    border-color:rgba(2,109,38,0.9);
    font-weight:400;
}
ul li,
body,
#content ul li:before  {
    font-weight:100;
    color: #333;
}

#content ul li:before {
    font-size:10px;
    content:'\f111';
}

#content1b,
#content2a,
#content3b,
#content4a,
#content5b,
#content6a {
    background-color:#fff;
    padding:20px;
}

/*----------------------------------------------------------------
    Contact
----------------------------------------------------------------*/

#contact p,
.contact_detail, 
.contact_detail a, 
.contact_detail a:hover, 
.contact_detail a:focus {
    font-weight:100;
    color:#333;
}

#contact {
    background-color: #fbfbfb;
}

#contact2f {
    margin-bottom:5px;
}
/*----------------------------------------------------------------
    Hide Blocks
----------------------------------------------------------------*/

#contact1b,
#contact2d,
#content5,
#content6 {
    display: none;
}

/*----------------------------------------------------------------
    Footer
----------------------------------------------------------------*/

footer *, 
footer a , 
footer a:hover, 
footer {
    color: #fff;
}

footer {
    background-color:#153f89;
    padding: 20px 0 20px;
}

/*----------------------------------------------------------------
  Media Queries
----------------------------------------------------------------*/
@media only screen and (max-width: 720px) and (min-width: 200px)  {
    #banner strong {
        font-size:45px;
    }
    #banner h1 {
        font-size:43px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 767px) and (min-width: 0px)  {
    #content1b, 
    #content2a, 
    #content3b, 
    #content4a, 
    #content5b, 
    #content6a {
        width: 91%;
    }
    #banner hr {
      width:70%;
    }
    #banner .btn {
        padding-left:40px;
        padding-right:40px;
    }
    .content_block{
      padding-bottom:20px;
    }
    #contact input#submit-form{
        width:100%!important;
    }
    #header {
        padding:25px 0 20px 0;
    }
    #banner {
        padding:20px 0 20px 0;
    }
    .banner_cover {
        height:225px;
    }

    #header2b {
        line-height: 30px;
    }
    #content,
    #contact{
        padding:80px 0 60px 0;
    }
    #content .btn {
        padding:15px;
        width:100%;
    }   
}
@media (min-width: 768px) {

    #banner1 img {
    margin-left: -23px;
    }

    /*#banner1,
    #banner h1 {
        margin:0;
        text-align:center;
    }*/
    .banner_cover {
        height:110px;
    }
    body,
    ul li {
        line-height: 25px;
    }
    #content1a, #content2b, #content3a, #content4b, #content5a, #content6b {
        width: 55%;
    }
    #content1b, #content2a, #content3b,#content4a, #content5b, #content6a {
        width: 45%;
        padding-top:30px;
    }
     #content1a img, #content2b img, #content3a img, #content4b img, #content5a img, #content6b img {
        width:100% !important;
    }
}
/*----------------------------------------------------------------
  Service Circle
----------------------------------------------------------------*/
@media (min-width:992px){
    #services p {
    margin: 0 -18% 0 -18%;
    }
}
@media only screen and (max-width: 991px) and (min-width: 768px)  {  
    #service1,
    #service2,
    #service3,
    #service4 {
        padding:0% 1% 0% 1%;
    }
    .serviceImg {
        padding:25%;
    }
    #services {
        padding:40px 0 20px;
    }
}
@media (max-width: 767px) {  
    #service1,
    #service2,
    #service3,
    #service4 {
        padding:0% 5% 0% 5%;
    }
    #services p {
        margin: 0 2% 0 1%;
    }
    .serviceImg {
        margin:0% 15% 0% 10%;
    }
    #services {
        padding:40px 0 20px;
    }  
    #service1:hover,
    #service2:hover,
    #service3:hover,
    #service4:hover {
        transform: scale(1.0);
    }
}
@media (max-width: 580px) {
    .serviceImg {
        margin:0% 5% 0% 5%;
    }
}  
@media (max-width: 480px) {  
    #service1,
    #service2,
    #service3,
    #service4 {
        padding:0% 25% 0% 25%;
    }
    #services p {
        margin: 0 -20% 0 -20%;
    }
    .serviceImg {
        padding:20%;
    }
}
/*----------------------------------------------------------------
- Animation & Extras
----------------------------------------------------------------*/
#wrapper {display: flex; flex-direction: column;}
#services { order: 2; }
#banner { order: 1; }
#content { order: 3; }
#contact { order: 4; }
footer { order: 5; }
#banner1 {
    animation:move 2s ease;
}

@-webkit-keyframes move {
    from {transform: scale(0.8);opacity:0;}
    to {transform: scale(1.0);opacity:1;}
}

#banner .btn:hover, 
#banner .btn:focus, 
#banner .btn:active, 
#banner .btn.active, 
.open>.dropdown-toggle.btn{
    transition: all 200ms ease-in;
}

body::-webkit-scrollbar {
    background-color: #e4e4e4;
    width: 10px;
}
 
body::-webkit-scrollbar-thumb {
  background-color: #333;
}