@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&display=swap');
/*----------------------------------------------------------------
    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,
#contact1a a,
#contact1a span,
.btn, 
.formbuilder-form input#submit-form, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form,
p,
ul li,
#header2a a,
#header2a span,
#header2b span, 
#header2b a,
.formbuilder-form .row label,
.contact_detail, 
.contact_detail a, 
.contact_detail a:hover, 
.contact_detail a:focus{
    font-family: 'Heebo', sans-serif;
}

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

.form,
#extraFormsContainer .modal-dialog{
   background-color: rgb(255, 255, 255);
   color: #888;
}

.formbuilder-form .row input, 
.formbuilder-form .row select, 
.formbuilder-form .row textarea {
    padding:8px 10px;
}

.formbuilder-form .row label, .rqrd,
#extraFormsContainer .formbuilder-form .row label, #extraFormsContainer .rqrd {
    color: #525252;
}

/*----------------------------------------------------------------
    Buttons
----------------------------------------------------------------*/

.btn{
    white-space:normal;
    text-transform:uppercase;
    font-weight: 600;
    color: #000;
    border:2px solid #f8981d;
    background-color:#f8981d;
    transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
}
#content .btn,
.formbuilder-form input#submit-form, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form{
    white-space:normal;
    font-weight: 600;
    text-transform:uppercase;
    color: #000;
    background-color: #f8981d;
    transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
}

.btn:focus,
.btn:hover,
#content .btn:focus,
#content .btn:hover,
.formbuilder-form input#submit-form:hover, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form:hover {
    color: #f8981d;
    border:2px solid #000;
    background-color: #000;
    transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
}

/*----------------------------------------------------------------
    Header
----------------------------------------------------------------*/
#header {
    padding: 15px 0 18px 0;
    width: 100%;
    background-color: #ffffff;
}

#header1 p{
    line-height:0px;
    margin-bottom:0px;
}

header span, 
#header2a a,
#header2a span{
     color: #000000;
     font-weight: 600;
     font-size:33px;
}

#header2b a, 
#header2b a:hover {
    color: #000000;
    font-size:20px;
}

#header2a:before {
    color:#f8981d;
    font-size:30px;
    content:'\f098';
    padding-right:5px;
}

#header2b{
    line-height:5px;
}

#header2 {
    padding-bottom: 21.5px;
}
/*----------------------------------------------------------------
    Banner
----------------------------------------------------------------*/
#banner {
    padding: 200px 0 200px 0;
    background-color:#333;
}
#banner p,
#banner h1,
#banner h2,
#banner h3,
#banner h4 {
  color: #fff;
}
#banner h1,
#banner h2,
#banner h3,
#banner h4 {
    font-weight: 600;
    line-height:57px;
    font-size:55px;
}
#banner p {
    font-size:22px;
}
.banner_cover {
    opacity: 0.3;
    background-color: #000;
}
/*----------------------------------------------------------------
    Services
----------------------------------------------------------------*/
#services {
    padding:10px 0 0 0;
    background-color:#eee;
}
#services h3 {
    font-weight: 500;
    color:#666;
    line-height:25px;
    margin-bottom:10px;
    transition: all 0.4s ease 0s;
}
#services p {
    font-size:18px;
    font-weight:400;
    color: #888;
}
.serviceImg {
    border-radius: 50%;
    background-color:#ffffff;
    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{
    background-color: #fff;
}
#content h1,
#content h2 {
    font-weight: 600;
    color:#060203;
    font-size:31px;
}
#content h3{
    font-weight: 600;
    color:#060203;
    font-size:28px;
    margin-bottom:0px;
}
#content ul li:before{
    color: #f8981d;
    content:'\f00c';
}
#content hr{
    border-bottom:3px solid #f8981d;
    width:80px;
}
#content blockquote{
    background-color:#ffffff;
}
#content p,
#content ul li{
    font-weight:400;
    color:#252524;
    font-size:18px;
}
/*----------------------------------------------------------------
    Gallery
----------------------------------------------------------------*/
#gallery {
    background-color: #fafafa;
}
#gallery img {
    display: block;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}
#gallery img:hover {
    opacity:0.5;
}

#gallery1 p, 
#gallery, 
#gallery .container{
    padding: 0;
    margin-bottom :0;
}
#gallery1,
#gallery p > img,
#gallery p > a, 
#gallery p.gallery1 > a, 
#gallery p.gallery1 > img {
    -webkit-box-flex: 0 0 100%;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding:0;
}
#gallery img ,
#gallery1 p, 
#gallery, 
#gallery .container, 
#gallery img {
    width:100% !important;
}
#gallery .row, 
#gallery1, 
#gallery p > img, 
#gallery p > a,
#gallery p.gallery1 > a, 
#gallery p.gallery1 > img {
    margin: 0;
}
@media only screen and (min-width: 768px){
    #gallery p > img, 
    #gallery p > a, 
    #gallery p.gallery1 > a, 
    #gallery p.gallery1 > img {
      -webkit-box-flex: 0 0 33.333%;
      -webkit-flex: 0 0 33.333%;
      -ms-flex: 0 0 33.333%;
      flex:  0 0 33.333%;
      max-width: 33.333%;
      margin-bottom: 0px;
    }
}
@media (max-width: 767px){
    #gallery p>img,
    #gallery p>a,
    #gallery p.gallery1>a,
    #gallery p.gallery1>img{
      -webkit-box-flex:0 0 100%;
      -webkit-flex:0 0 100%;
      -ms-flex:0 0 100%;
      flex:0 0 100%;
      max-width:100%;
      margin-bottom:0
    }
    #gallery img{width:100%}
    #gallery p img,
    #gallery p.gallery3 img,
    #gallery p.gallery4 img,
    #gallery p.gallery5 img,
    #gallery p.gallery6 img{
      -webkit-box-flex:0 1 100%;
      -webkit-flex:0 1 100%;
      -ms-flex:0 1 100%;
      flex:0 1 100%;
      max-width:100%
    }
}
/*----------------------------------------------------------------
    Contact
----------------------------------------------------------------*/
#contact{
    background-color:#171523;
    border-top: 5px solid #d6111e;
}
#contact h1,
#contact h2,
#contact h3,
#contact1 span,
#contact1a a {
    font-size:27px;
    text-decoration:none;
    font-weight: 600;
    color:#ffffff;
}
#contact p, 
.contact_detail, 
.contact_detail a, 
.contact_detail a:hover, 
.contact_detail a:focus,
.contact_detail, 
.contact_detail a {
    font-weight:400;
    font-size:18px;
    color:#fafafa;
}
#contact2c:before,
#contact2d:before,
#contact2e:before,
#contact2f:before{
    color: #f8981d;
}
#contact blockquote {
    border-color:#f8981d;
}
#contact a, #contact span {
    white-space: nowrap;
} 
#contact2f{
    margin-bottom:15px;
}
#__email__ {
  width: 1px;
}
/*----------------------------------------------------------------
    Hide Blocks
----------------------------------------------------------------*/
#content2b,
#contact2c,
#contact2d,
#contact2f,
#contact2g,
#contact1b{
    display: none;
}
/*----------------------------------------------------------------
    Footer
----------------------------------------------------------------*/
footer *, 
footer a ,  
footer a:hover, 
footer {
    color: #fafafa;
    text-transform:uppercase;
}

footer {
    background-color: rgba(0,0,0,1);
    padding: 20px;
}
/*----------------------------------------------------------------
    Media Queries
----------------------------------------------------------------*/
@media only screen and (min-width: 768px){
    #contact1{
        width:40%;
    }
    #contact2{
        width:60%;
    }
    #content hr{
        margin-left:0px;
    }
    #banner1,
    #banner h1,
    #banner h2,
    #banner h3,
    #banner h4 {
      margin:0;
      text-align:left;
    }
    #banner1{
      float:left;
    }
}
@media only screen and (max-width: 991px) and (min-width:768px){
    #services h3 {
      font-size:23px;
    }
    #services p{
      font-size:16.7px;
    }
    #content h1,
    #content h2,
    #contact h1,
    #contact h2{
      font-size:28px;
    }
}
  
@media (max-width: 767px) {
   #content2a,
    #content .form{
        display:none;
    }
    #content2b{
        display:block;
    }
    #service3 {
      clear:left;
    }
    #content{
      padding:60px 0 40px 0;
    }
    #contact {
      padding:60px 0 50px 0;
    }
    #header1{
      margin-bottom:-4px;
    }
    #header2b{
      line-height:15px;
    }
    #header{
      padding: 45px 0 28px 0;
    }
    #banner{
      padding:45px 0 50px 0;
    }
    #banner hr{
        width:75%;
    }
    #banner h1,
    #banner h2,
    #banner h3,
    #banner h4{
        font-size:50px;
      line-height:55px;
    }
    #banner p {
      font-size:19px;
    }
    #services h3{
        font-size:25px;
    }
    #services p{
        font-size:17px;
    }
    #banner,
    #services,
    #contact,
    #content,
    #header{
        overflow-x:hidden;
    }
}
@media (max-width: 480px) {
    #banner h1,
    #banner h2,
    #banner h3,
    #banner h4 {
      font-size:48px;
      line-height:50px
    }
    #banner p{
        font-size:19px;
        line-height:27px;
    }
    #services h3{
      font-size:23px;
    }
    #contact h1,
    #contact h2{
      font-size:30px;
    }
    .btn,
    #content .btn{
        width:100%;
    }
}
@media (max-width: 375px) {
    #banner h1,
    #banner h2,
    #banner h3,
    #banner h4 {
      font-size:40px;
      line-height:40px
    }
}
@media (max-width: 320px) {
    #banner h1,
    #banner h2,
    #banner h3,
    #banner h4 {
      font-size:37px;
      line-height:38px
    }
}
@media (max-width: 600px) {
    .btn{
      word-wrap: break-word;
      padding-right:7%;
      padding-left:7%;
    }
}
@media (min-width: 0px) {
    .btn {
      margin-top: 10px;
    }
}


/*----------------------------------------------------------------
  Service Circle
----------------------------------------------------------------*/
@media only screen and (max-width:1199px) and (min-width:992px){
  .serviceImg {
    padding: 40px;
  }
}

@media only screen and (min-width: 992px){
    #services h3 {
      margin-left:-25px;
      margin-right:-25px;
    }
    #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) {  
    #content ul li {
      margin: 0px 7% 0px 16%;
      text-align: left;
      text-indent: -24px;
    } 
    #service1,
    #service2,
    #service3,
    #service4 {
        padding:0% 5% 0% 5%;
    }
    #services p {
        margin: 0 0% 0 0%;
    }
    .serviceImg {
        margin:0% 15% 0% 15%;
    }
    #services {
        padding:40px 0 20px;
    }  
    #service3 {
        clear:left;
    }
    #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
----------------------------------------------------------------*/
#banner1 {
    animation:move 2s ease;
}
@-webkit-keyframes move {
    from {transform: scale(0.8);opacity:0;}
    to {transform: scale(1.0);opacity:1;}
}
.btn:hover, 
.btn:focus, 
.btn:active, 
.btn.active, 
.open>.dropdown-toggle.btn {
    transition: all 200ms ease-in;
}

.btn:focus {
    color:#939393;
}