@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*----------------------------------------------------------------
  BUTTONS & FORMS
----------------------------------------------------------------*/

#banner .btn {
    background-color: #f9f1e4;
    border:solid 2px #f9f1e4;
    color: #123b79;
}

#banner .btn:hover {
    background-color: #391b0b;
    border:solid 2px #391b0b;
    color: #ffffff;
}

.btn,
.formbuilder-form input#submit-form,
#extraFormsContainer .modal-dialog input#submit-form {
    background-color: #123b79;
    border:solid 2px #123b79;
    color: #ffffff;
    border-radius: 10px;
    text-shadow: none;
    font-weight: 600!important;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Open Sans", sans-serif !important;
}

.btn:hover {
    background-color: #391b0b;
    border:solid 2px #391b0b;
    color: #fff;
    text-decoration: none;
}

.form,
#quote_form_form,
#extraFormsContainer .modal-dialog {
    background-color: #fff;
    color: #000;
 font-family: "Open Sans", sans-serif;
}

.formbuilder-form input,
.formbuilder-form textarea {
    background-color: #f5f5f5;
}

.formbuilder-form label {
    color: #333;
 font-family: "Open Sans", sans-serif;
}
#contact1 .button.blue {
    background-color: #123b79 !important;
}

/*----------------------------------------------------------------
  Hide Blocks
----------------------------------------------------------------*/

#contact2d
 {
    display: none;
}



/*----------------------------------------------------------------
  Custom Styles
----------------------------------------------------------------*/

p,
ul li ,a, ol li{
    font-family: "Open Sans", sans-serif;
}
h1, h2, h3, h4 {
  /*  text-transform: uppercase;*/
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Open Sans", sans-serif !important;
	font-weight: 700;

}
a {
    text-decoration: underline;
    word-wrap: break-word;
    color: #ffffff;
}

#contact2g {
    color: #ffffff;
}

.checkBoxGroup
{
 display: flex;
 flex-direction: column;
 text-align: left;
 text-wrap: wrap;
}
  .checkBoxGroup label {
    display: block; /* Ensure labels take up full width */
    white-space: normal; /* Allow text to wrap */
    margin-bottom: 5px; /* Optional: add some space between checkboxes */
  }


/*----------------------------------------------------------------
  Header
----------------------------------------------------------------*/

#header2a:before {
    display: none;
}

#header2a {
    font-size: 35px;
    color: #123b79;
}

#header {
    padding: 20px 0;
}

#header1 {
    margin-top: 15px;
}

header a,
header a,
header span,
#header2a:before,
#header2a a {
    color: #123b79;
    font-size: 35px;
    line-height: 0;
}
#header2a:before{
    padding-right:10px;
}
#header2 {}

#header2b a {
    color: #391b0b;
    font-size: 20px;
    text-decoration: none;
}

#header2a {
    line-height:1.2em;
}
#header a,
#header span{
 font-family: "Open Sans", sans-serif;
    font-weight:700;
}

/*----------------------------------------------------------------
  Banner
----------------------------------------------------------------*/

.banner_cover {
    background: #f9f1e4;
    height: 225px;
    opacity: 1;
}

#banner {
    padding:190px 0;
    margin: auto;
    width:100%;
}

#banner1 h1,
#banner1 h2,
#banner1 h3,
#banner1 p,
#banner1 hr {
    color: #ffffff;
    text-align: center;
}

#banner1 h1 {
    font-size: 65px;
    font-weight: 400;
    line-height: 1.2em;
    text-transform: uppercase;
}

#banner1 h1 strong {
    display:block;
    line-height:1.2em;
    font-weight: 700;
}

#banner1 p {
    font-size: 25px;

}

#banner1 hr {
    border: solid 0.7px #fff;
    width: 50%;
}

#banner1 {
    animation: move 2s ease;
    width:100%;
}

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


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

#content {
    background-color: #ebe6e2;
}

#content h1,
#content h2,
#content h3 {
    color: #391b0b;
    font-size: 40px;
    font-weight:700;
	line-height: 40px;
}

#content h2 strong{
    font-weight:700;
    color: #391b0b !important;
}


#content h3 strong{
    font-weight:700;
    line-height:1.2em;
    display:block;
    color: #391b0b !important;
}
#content p,
#content ul li {
    color: #333;
    font-weight: 300;
}
#content hr{
    border:solid 3px #f7c51e;
    width:60px;
    margin-left:0;
}
#content p strong{
    font-size:24px;
}
#content ul li:before{
    content: '\f00c';
	color: #4BD207;
}
#content p.img img {
    box-shadow: none;
    transition: all 0.4s ease 0s;
}

.content_block {
    padding-bottom: 60px;
}
#content .btn:hover{
    border:solid 2px #391b0b;
    color:#ffffff;
}
#contact2 a {
    color: #ffffff;
    text-decoration: none;
}
#contact2d:before {
    background: url();
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 0;
}

@media only screen and (min-width: 992px){
	.list_half {
	    width: 100%;
	    columns: 2;
	    -webkit-columns: 2;
	    -moz-columns: 2;
	}
}
@media only screen and (max-width: 767px) and (min-width: 481px){
	.list_half {
	    width: 100%;
	    columns: 2;
	    -webkit-columns: 2;
	    -moz-columns: 2;
	}
}
#content p.img img:hover {
    transform: scale(1.07);
}


/*----------------------------------------------------------------
  SERVICES
----------------------------------------------------------------*/

#services {
   /* background-color: #f2f2f2;*/
    padding: 10px 0 0 0;
}

#services h4 {
	font-size: 20px;
    color: #ffffff;
    padding-bottom:10px;
}

#services p {
    color: #ffffff;
}

#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);
}

.serviceImg {
    background-color: #ffffff;
    border:solid 3px #ffffff;
    border-radius: 50%;
    padding: 50px;
    transition: all 0.4s ease 0s;
}


/*----------------------------------------------------------------
  Service Circle
----------------------------------------------------------------*/

@media (min-width:992px) {
    #services p {
        margin: 0 -18% 0 -18%;
    }
}
@media (max-width:1199px) and (min-width:992px){
  .serviceImg{
    padding:40px;
  }
}
@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) {
        ul li:before, .contact_detail:before {
        display: inline-block;
    }
    #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%;
    }
}


/*----------------------------------------------------------------
  CONTACT
----------------------------------------------------------------*/


#contact {
    /*background-color: #070707;*/
}

#contact h1,
#contact h2,
#contact h3,
#contact1 a{
    color: #ffffff;
}

#contact h3 {

}

#contact h1 {
    font-size: 24px;
    line-height: 1em;
}

#contact p,
#contact ul li,
#contact2e a {
    color: #fff;
    font-weight: 300;
    text-decoration: none;
}

#contact2f {
    margin-bottom: 0;
}

#contact2c:before {
    content: '\f098';
}

.contact_detail {
    color: #fff;
    font-weight: 300;
}
#contact a, #contact span {
    
    white-space: nowrap;

} 

/*----------------------------------------------------------------
  FOOTER
----------------------------------------------------------------*/

footer {
    background: #103771;
    padding: 15px;
}

footer a,
footer p {
    color: #ffffff;
}


/*----------------------------------------------------------------
    Animation & Extras
----------------------------------------------------------------*/

#wrapper {
    display: flex;
    flex-direction: column;
}

#services {
    order: 2;
}

#banner {
    order: 1;
}

#content {
    order: 3;
}

#contact {
    order: 4;
}

footer {
    order: 5;
}


/*----------------------------------------------------------------
  Media Queries
----------------------------------------------------------------*/

@media only screen and (min-width: 1200px) {
    #content1a,
    #content2b,
    #content3a,
    #content4b,
    #content5a,
    #content6b {
        width: 60%;
    }
    #content1b,
    #content2a,
    #content3b,
    #content4a,
    #content5b,
    #content6a {
        width: 40%;
    }
    #content img {
        width: 100%;
    }
    #contact1,
    #contact2 {
       /* width:50%;*/
        margin-left:0;
    }

    
}

@media (max-width: 1200px) {
    #banner1 h1 {
        font-size: 65px;
    }
}    

@media (max-width: 991px) {
    #banner {
        padding: 160px 0;
        width: 100%;
    }
    #banner1    {
        width:100%;
    }
    #contact1,
    #contact2 {
        width:50%;
        margin-left:0;
    }
    #banner1 h1{
    }
    #content .btn{
        padding: 20px;
        font-size: 16px;
    }
    .list_half{
        margin-bottom:20px;
    }

}

@media (max-width: 767px) {
header a, header a, header span, #header2a:before, #header2a a {
    font-size: 22px;
}

.form {
    text-align: left;
}

#header2b a {
    font-size: 18px;
}
    #header2 {
       
    }
    .banner_cover {
        height: 300px;
    }
    #banner1 h1,
    #banner1 h2,
    #banner1 h3,
    #banner1 p {
        text-align: center;
    }
    .list_half{
        margin-bottom:30px;
    }
    #banner1 h1{
        font-size: 50px;
    }

    #banner {
        padding: 120px 0;
    }
    .content_block {
        padding-bottom: 30px;
    }
    .content_block > div div { 
  	width: 100%; 
    }
    #contact1,
    #contact2 {
        width: 100%;
        margin-left: 0%;
    }
    #header2 {
    }
    #content hr,
    #banner1 hr {
        margin-left: auto;
    }
    #content ul li {
    
	margin: 0px 7% 0px 16%;
    
	text-align: left;
    
	text-indent: -17px;
    
    }

    #header {}
    #contact,
    #content{
        padding:50px 0 30px 0;
    }
    #banner,
    #services,
    #contact,
    #content,
    #header{
        overflow-x:hidden;
    }
    #contact .formbuilder-form input#submit-form{
	width:100%!important;
    }
    #extraFormsContainer .modal-dialog input#submit-form{
	width:100%!important;
    }
    #header1 img.img-responsive {
	width: 180px !important;
	}
	
	#contact2a p {
    display: none;
}
}

@media (max-width: 480px) {
    #banner1 h1{
        font-size: 30px;
    }

	
    #banner1 p {
        font-size: 18px;
        line-height: 25px;
    }

#content h1, #content h2, #content h3 {
    font-size: 30px;
}    
    .btn{
        padding:20px;
        width:100%;
    }
	.form {
        padding: 20px;
        text-align: left;
    }
	#header1 img.img-responsive {
	width: 100px !important;
	}
	html #contact2a h3	{
	display: none;
	}
	#content ul {
    width: 135px;
    margin: 25px auto;
}

header a, header a, header span, #header2a:before, #header2a a {
    font-size: 22px;
}
#header2b a {
    font-size: 18px;
}

    .banner_cover {
        height: 210px;
    }

}

@media (max-width: 375px) {
    #banner1 h1{
        font-size: 30px;
    }


}

@media (max-width: 320px) {
    #banner1 h1{
        font-size: 25px;
    }

}

/** additional codes**/
.list_half {
	width: 100%;
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
}


#contact {
    background-image: url(../../uploads/images/bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}